/*
 * (c) zitine.com
 */

 /* garder l'id pour la suppresion au lieu de lindex */

Drag.implement({
    options: { preventDefault: true }
});

var zit_custom = new Class({
    config: $A([
        { 'tab': 0,
          'id': 1,
          'type': 'text',
          'effects': {},          
          'effects_query_string': '0&0&0&0&0&0&0&0&0&0',
          'data': { 'v': 'Votre texte', 'c': '32C0D9', 's': 25,
                    'i': 't1', 'f': 'txt_holiday' },
          'drag': { 'x': 2, 'y': 5, 'z': 1 } },

        { 'tab': 0,
          'id': 2,
          'type': 'text',
          'effects': {}, 
          'effects_query_string': '0&0&0&0&0&0&0&0&0&0',
          'data': { 'v': 'ICI', 'c': '6F2976', 's': 60,
                    'i': 't2', 'f': 'txt_revolt' },
          'drag': { 'x': 15, 'y': 55, 'z': 2 } },

        { 'tab': 0,
          'id': 3,
          'type': 'symbol',
          'effects': {},          
          'effects_query_string': '0&0&0&0&0&0&0&0&0&0',
          'data': { 'l': 'J', 'c': '444444', 's': 49,
                    'f': 'sym_Ladybug_Dings' },
          'drag': { 'x': 65, 'y': 125, 'z': 2 } }
    ]),
    
    options: {
        'locales': {},
        'cookie_name': 'cfg'
    },

    tabs: null,
    focus: null,

    panels: {
        'text': null, 
        'symbol': null, 
        'upload': null,
        'unfocus': null
    },

    tools: {
        'text': null, 
        'symbol': null, 
        'upload': null
    },

    elements: {},

    next_id: 0,

    display_price: function() {
        var tab = 0;

        this.config.each(function(item, index) {
            if (item.tab == 0) {
                if (item.type != 'text' || 
                    (item.data.v != ' ' && item.data.v != '')) 
                {
                    if (tab == 0) {
                        tab = 1;

                    } else {
                        tab = (tab != 1 ? 3 : 1);
                    }
                }
            }
            if (item.tab == 1) {
                if (item.type != 'text' || 
                    (item.data.v != ' ' && item.data.v != '')) 
                {
                    if (tab == 0) {
                        tab = 2;

                    } else {
                        tab = (tab != 2 ? 3 : 2);
                    }
                }    
            }
        });

        if ($('price2') == null) {
            return;
        }

        if (tab == 3) {
            $('price1').addClass('hide');
            $('price2').removeClass('hide');

        } else {
            $('price2').addClass('hide');
            $('price1').removeClass('hide');
        }
    },

    save_config: function() {
        var config = JSON.encode(this.config);
        Cookie.write(this.options.cookie_name, config, {path: '/'});
    },

    fuck_ie6: function() {
        if (Browser.Platform.win) {
            if (Browser.Engine.trident && Browser.Engine.version == 4) {
                new Asset.javascript('/js/custom_ie6.js');
                return true;
            }
        }
        return false;
    },

    backend_src: function(cfg) {

        switch (cfg.type) {
        case 'symbol':
            return '/backend/sym/?'+ 
                    encodeURIComponent(cfg.data.l) +'&'+
                    encodeURIComponent(cfg.data.c) +'&'+
                    encodeURIComponent(cfg.data.s) +'&'+
                    encodeURIComponent(cfg.data.f) +'&'+
                    cfg.effects_query_string;

        case 'text':
            return '/backend/txt/?'+ 
                    encodeURIComponent(cfg.data.v) +'&'+
                    encodeURIComponent(cfg.data.c) +'&'+
                    encodeURIComponent(cfg.data.s) +'&'+
                    encodeURIComponent(cfg.data.f) +'&'+
                    cfg.effects_query_string;

        default:
            return cfg.data.json.img_r +'?'+ ((new Date()).getTime());
        }
    },

    focus_type: function(type) {
        if (this.focus == null || this.focus.type != type) {
            return false;
        }
        return true;
    },

    focus_cfg: function(cfg) {
        var img = $('i'+ cfg.id);
        if (img == null) {
            console.log('focus_cfg() img undefined');
            return false;
        }

        if (this.focus == null || this.focus.type != cfg.type) {
            switch (cfg.type) {
            case 'text':
                this.panels.symbol.addClass('hide');            
                this.panels.upload.addClass('hide');            
                this.panels.text.removeClass('hide');            
                break;

            case 'symbol':
                this.panels.text.addClass('hide');            
                this.panels.upload.addClass('hide');            
                this.panels.symbol.removeClass('hide');            
                break;

            case 'upload':
                this.panels.text.addClass('hide');            
                this.panels.symbol.addClass('hide');            
                this.panels.upload.removeClass('hide');            
                break;
            }
            
            this.panels.unfocus.addClass('hide'); 
        }

        var old = null;
        var old_zindex = 1;

        if (this.focus_type('text')) {
            $(this.focus.data.i).removeClass('focused');
        }

        if (this.focus != null) {
            old = $('i'+ this.focus.id);
        }

        if (old != null) {
            old.removeClass('in_focus');
            old_zindex = old.getStyle('z-index');
        
        } else {
            /* find MAX */
            this.config.each(function(item) {
                if (item.drag.z > old_zindex)
                    old_zindex = item.drag.z;
            });
        }

        $$('.zit_picker').each(function(picker) {
            picker.destroy();
        });

        img.addClass('in_focus');
        cfg.drag.z = (old_zindex.toInt() + 1);
        img.setStyle('z-index', cfg.drag.z);
        this.save_config();

        this.focus = cfg;

        switch (cfg.type) {
        case 'text':
            this.tools.text.size.set(cfg.data.s);
            this.tools.text.font.set(cfg.data.f);
            this.tools.text.color.set('#'+ cfg.data.c);
            $(cfg.data.i).addClass('focused');
            break;

        case 'symbol':
            this.tools.symbol.size.set(cfg.data.s);
            this.tools.symbol.color.set('#'+ cfg.data.c);
            break;

        case 'upload':
            this.tools.upload.size.set(cfg.data.s);
            break;
        } 

        /* xxx if effects != null */
    },

    delete_cfg: function(cfg) { 
        if (cfg == null) {
            if (this.focus == null) {
                console.log('delete_cfg() unfocus'); 
                return false;
            }
            cfg = this.focus;
        }

        if (cfg.type == 'text') {
            $(cfg.data.i).setProperty('value', '');
        }

        var img = $('i'+ cfg.id);
        if (img != null) {
            img.destroy();
        }

        this.config.erase(cfg);
        this.save_config();
        this.unfocus();
        this.display_price();
    },

    replace_cfg: function(cfg) {
        switch (cfg.tab) {
        case 1:
            var container = this.elements.bcontainer;
            break;

        default:
            var container = this.elements.fcontainer;
        }

        var img = new Element('img', {
            'id': 'i'+ cfg.id,
            'src': this.backend_src(cfg)
        }).addClass('drag').setStyles({
            'top': cfg.drag.y,
            'left': cfg.drag.x,
            'z-index': cfg.drag.z
        }).addEvents({
            'mouseenter': function() {
                img.addClass('before_focus');
            },
            'mouseleave': function() {
                img.removeClass('before_focus');
            },
            'mousedown': function() {
                this.focus_cfg(cfg);
            }.bind(this)
        });

        var old = $('i'+ cfg.id);
        if (old != null) {
            old.destroy();
        }

        if ($('i'+ cfg.id) == null) {
            img.inject(container);
        }

        new Drag(img, {
            onComplete: function(i) {
                if (this.focus != null) {
                    this.focus.drag.y = i.getStyle('top').toInt();
                    this.focus.drag.x = i.getStyle('left').toInt();
                    this.save_config();
                }
            }.bind(this)
        });            

        this.display_price();
    },

    unfocus: function() {
        if (this.focus_type('text')) {
            $(this.focus.data.i).removeClass('focused');
        }

        this.focus = null;
        this.panels.text.addClass('hide');            
        this.panels.symbol.addClass('hide');            
        this.panels.upload.addClass('hide');            
        this.panels.unfocus.removeClass('hide');
    },

    load_text_tools: function() {
        var table = '<table>'+
                    '<tr>'+
                    '   <td><strong>'+ this.options.locales.font +':</strong></td>'+
                    '   <td style="padding-left: 30px; text-align: center" rowspan="2">'+
                    '       <strong>'+ this.options.locales.size +':</strong>'+
                    '       <input type="text" size="2" value="0"'+
                    '           id="custom_font_size_input" class="slide_input" />'+
                    '       <table cellspacing="0" cellpadding="0">'+
                    '       <tr>'+
                    '           <td><img src="/img/icons/font_delete.png" id="custom_font_size_d" /></td>'+
                    '           <td><div id="custom_font_size" class="slider_adv"'+
                    '               style="width: 120px"><div id="custom_font_size_knob"'+
                    '                   class="knob"></div></div></td>'+
                    '           <td><img src="/img/icons/font_add.png" id="custom_font_size_u" /></td>'+
                    '       </tr>'+
                    '       </table>'+
                    '   </td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td><div class="choose_font point" id="custom_choose_font_sel"><img src="/img/fonts/txt_revolt.png"'+
                    '           id="custom_choose_font" class="point" height="25"></div></td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td><strong>'+ this.options.locales.color +':</strong></td>'+ 
                    '   <td rowspan="2" style="padding-left: 30px; vertical-align: bottom">'+
                    '       <a href="#" class="custom_delete txt_delete">'+ this.options.locales.del +'</a>'+
                    '       <a href="#" id="custom_font_effect">'+ this.options.locales.effect +'</a>'+
                    '   </td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td><a href="#" id="custom_font_color"><img src="/img/pix.gif" /><a></td>'+
                    '</tr>'+
                    '</table>';

        this.panels.text = new Element('div').inject($('custom_tools_panels')).set('html', table);

        this.tools.text = {
            'color': new zit_custom_color_picker($('custom_font_color'), $('product_tools'), { 
                'txt_cancel': this.options.locales.cancel,
                'callback': function(hex) {
                    hex = (hex).replace(/#/,'');
                    if (this.focus_type('text') && hex != this.focus.data.c) {
                        this.focus.data.c = hex;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            }),     
            'font': new zit_custom_font_picker($('custom_choose_font_sel'), $('product_tools'), { 
                'txt_cancel': this.options.locales.cancel,
                'callback': function(font) {
                    if (this.focus_type('text') && font != this.focus.data.f) {
                        this.focus.data.f = font;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            }),     
            'size': new zit_custom_slider('custom_font_size', {
                'range': [ 0, 120 ],
                'callback': function(step) {
                    if (this.focus_type('text') && this.focus.data.s != step) {
                        this.focus.data.s = step;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            }),
            'effects': new zit_custom_effects_picker($('custom_font_effect'), $('product_tools'), {
                'txt_cancel': this.options.locales.cancel,
                'txt_flop': this.options.locales.effect_flop,
                'txt_shear': this.options.locales.effect_shear,
                'txt_swirl': this.options.locales.effect_swirl,
                'txt_wave': this.options.locales.effect_wave,
                'txt_rotate': this.options.locales.effect_rotate,
                'txt_distort_arc': this.options.locales.effect_distort_arc,
                'txt_distort_polar': this.options.locales.effect_distort_polar,
                'st_callback': function() {
                    return this.focus.effects;
                }.bind(this),
                'callback': function(effects) {
                    /* static query_string function */
                    var flop = (effects.get('flop') == null ? 0 : effects.get('flop'));
                    var effects_query_string = effects.get('rotate') +'&'+
                                               effects.get('distort_arc') +'&'+
                                               effects.get('distort_polar') +'&'+
                                               effects.get('swirl') +'&'+
                                               effects.get('shear').s1 +'&'+
                                               effects.get('shear').s2 +'&'+
                                               effects.get('wave').s1 +'&'+
                                               effects.get('wave').s2 +'&'+ flop +'&0';

                    if (this.focus_type('text') && 
                        effects_query_string != this.focus.effects_query_string) 
                    {
                        this.focus.effects = effects.getClean();
                        this.focus.effects_query_string = effects_query_string;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            })
        };
        this.panels.text.addClass('hide');
    },

    load_symbol_tools: function() {
        var table = '<table>'+
                    '<tr>'+
                    '   <td><strong>'+ this.options.locales.color +':</strong></td>'+ 
                    '   <td style="padding-left: 30px; text-align: center" rowspan="2">'+
                    '       <strong>'+ this.options.locales.size +':</strong>'+
                    '       <input type="text" size="2" value="0"'+
                    '           id="custom_symbol_size_input" class="slide_input" />'+
                    '       <table cellspacing="0" cellpadding="0">'+
                    '       <tr>'+
                    '           <td><img src="/img/icons/magnifier_zoom_out.png"'+
                    '                    id="custom_symbol_size_d" /></td>'+
                    '           <td><div id="custom_symbol_size" class="slider_adv"'+
                    '               style="width: 120px"><div id="custom_symbol_size_knob"'+
                    '                   class="knob"></div></div></td>'+
                    '           <td><img src="/img/icons/magnifier_zoom_in.png"'+
                    '                    id="custom_symbol_size_u" /></td>'+
                    '       </tr>'+
                    '       </table>'+
                    '   </td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td><a href="#" id="custom_symbol_color"><img src="/img/pix.gif" /><a></td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td colspan="2" rowspan="2" style="padding-top: 10px; vertical-align: bottom">'+
                    '       <a href="#" class="custom_delete sym_delete">'+ this.options.locales.del +'</a>'+
                    '       <a href="#" id="custom_symbol_effect">'+ this.options.locales.effect +'</a>'+
                    '   </td>'+
                    '</tr>'+
                    '</table>';

        this.panels.symbol = new Element('div').inject($('custom_tools_panels')).set('html', table);

        this.tools.symbol = {
            'color': new zit_custom_color_picker($('custom_symbol_color'), $('product_tools'), { 
                'txt_cancel': this.options.locales.cancel,
                'callback': function(hex) {
                    hex = (hex).replace(/#/,'');
                    if (this.focus_type('symbol') && hex != this.focus.data.c) {
                        this.focus.data.c = hex;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            }),     
            'size': new zit_custom_slider('custom_symbol_size', {
                'range': [ 0, 160 ],
                'callback': function(step) {
                    if (this.focus_type('symbol') && step != this.focus.data.s) {
                        this.focus.data.s = step;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            }),
            'effects': new zit_custom_effects_picker($('custom_symbol_effect'), $('product_tools'), {
                'txt_cancel': this.options.locales.cancel,
                'txt_flop': this.options.locales.effect_flop,
                'txt_shear': this.options.locales.effect_shear,
                'txt_swirl': this.options.locales.effect_swirl,
                'txt_wave': this.options.locales.effect_wave,
                'txt_rotate': this.options.locales.effect_rotate,
                'txt_distort_arc': this.options.locales.effect_distort_arc,
                'txt_distort_polar': this.options.locales.effect_distort_polar,
                'st_callback': function() {
                    return this.focus.effects;
                }.bind(this),
                'callback': function(effects) {
                    /* static query_string function */
                    var flop = (effects.get('flop') == null ? 0 : effects.get('flop'));
                    var effects_query_string = effects.get('rotate') +'&'+
                                               effects.get('distort_arc') +'&'+
                                               effects.get('distort_polar') +'&'+
                                               effects.get('swirl') +'&'+
                                               effects.get('shear').s1 +'&'+
                                               effects.get('shear').s2 +'&'+
                                               effects.get('wave').s1 +'&'+
                                               effects.get('wave').s2 +'&'+ flop +'&0';

                    if (this.focus_type('symbol') && 
                        effects_query_string != this.focus.effects_query_string) 
                    {
                        this.focus.effects = effects.getClean();
                        this.focus.effects_query_string = effects_query_string;
                        this.replace_cfg(this.focus);
                        this.save_config();
                    }
                }.bind(this)
            })        
        };
        this.panels.symbol.addClass('hide');
    },

    load_upload_tools: function() {
        var table = '<table>'+
                    '<tr>'+
                    '   <td style="text-align: center"  colspan="2">'+
                    '       <strong>'+ this.options.locales.size +':</strong>'+
                    '       <input type="text" size="2" value="0"'+
                    '           id="custom_upload_size_input" class="slide_input" />'+
                    '       <table cellspacing="0" cellpadding="0">'+
                    '       <tr>'+
                    '           <td><img src="/img/icons/magnifier_zoom_out.png"'+
                    '                    id="custom_upload_size_d" /></td>'+
                    '           <td><div id="custom_upload_size" class="slider_adv"'+
                    '               style="width: 120px"><div id="custom_upload_size_knob"'+
                    '                   class="knob"></div></div></td>'+
                    '           <td><img src="/img/icons/magnifier_zoom_in.png"'+
                    '                    id="custom_upload_size_u" /></td>'+
                    '       </tr>'+
                    '       </table>'+
                    '   </td>'+
                    '</tr>'+
                    '<tr>'+
                    '   <td colspan="2" rowspan="2" style="padding-top: 10px; vertical-align: bottom">'+
                    '       <a href="#" class="custom_delete">'+ this.options.locales.del +'</a>'+
                    '   </td>'+
                    '</tr>'+
                    '</table>';
                    /*
                    '       <a href="#" id="custom_upload_effect">'+ this.options.locales.effect +'</a>'+
                    */

        this.panels.upload = new Element('div').inject($('custom_tools_panels')).set('html', table);

        this.tools.upload = {
            'size': new zit_custom_slider('custom_upload_size', {
                'range': [ 0, 200 ],
                'callback': function(step) {
                    if (this.focus_type('upload') && step != this.focus.data.s) {

                        new Request.JSON({ url: '/_upload_resize.php', 
                            onRequest: function() {
                                $('i'+ this.focus.data.json.id).setOpacity(.3);
                            }.bind(this),
                            onSuccess: function(json) {
                                $('i'+ this.focus.data.json.id).setOpacity(1);
                                this.focus.data.s = step;
                                this.replace_cfg(this.focus);
                                this.save_config();
                            }.bind(this)
                        }).send('resize='+ step.toInt() +'&json='+ JSON.encode(this.focus.data.json));
                    }
                }.bind(this)
            })
        };
        this.panels.upload.addClass('hide');
    },

    initialize: function(options) {
        this.setOptions(options);
        if (this.fuck_ie6()) {
            return false;
        }

        var config_cookie = Cookie.read(this.options.cookie_name);
        if (config_cookie != null) {
            this.config = $A(JSON.decode(config_cookie));
        }

        this.save_config();

        var waiter = new Waiter($('custom_product_and_tools')).start();

        this.elements = {
            'bcontainer': $('product_back_container'),
            'fcontainer': $('product_front_container')
        };

        this.panels.unfocus = $('custom_product_tools_empty');

        this.load_text_tools();
        this.load_symbol_tools();
        this.load_upload_tools();

        $$('.custom_delete').each(function(el) {
            el.addEvent('click', function() {
                this.delete_cfg(null);
                return false;
            }.bind(this));
        }.bind(this));

        this.tabs = new TabSwapper({
            cookieName: 'ftswapper',
            tabs: $$('#custom_product_and_tools .tabs img'),
            clickers: $$('#custom_product_and_tools .tabs img'),
            sections: $$('#custom_product_and_tools .product'),
            onActive: function(active_tab) {
                this.unfocus();
                /* focus tab = this.tabs.now */

                $$('#product_tools .texts input').each(function(input) {
                    input.setProperty('value', '');
                    input.removeClass('focused');
                });

                this.config.each(function(item, index) {
                    if (this.next_id <= item.id) {
                        this.next_id = item.id.toInt() + 1;
                    }

                    if (item.type == 'text' && item.tab == active_tab) {
                        $(item.data.i).value = item.data.v;
                    }

                    this.replace_cfg(item);
                }.bind(this));

                if (active_tab == 0) {
                    $('product_sens_front').removeClass('hide');
                    $('product_sens_back').addClass('hide');
                } else {
                    $('product_sens_back').removeClass('hide');
                    $('product_sens_front').addClass('hide');
                }
            }.bind(this)
        });

        $$('#product_tools .texts input').each(function(input) {
            input.addEvents({
                'focus': function() {
                    var create_img = true;

                    if (this.focus_type('text') && this.focus.data.i == input.id) {
                        return;
                    }

                    this.config.each(function(item, index) {
                        if (item.type != 'text' || 
                            item.tab != this.tabs.now || 
                            item.data.i != input.id) 
                        {
                            return;
                        }

                        create_img = false;
                        this.focus_cfg(item);

                    }.bind(this));

                    if (create_img == true) {
                        var new_cfg = {
                            'tab': this.tabs.now,
                            'id': (this.next_id++),
                            'type': 'text',
                            'drag': { 'x': 50, 'y': 50, 'z': 1 },
                            'data': { 'v': ' ', 'c': '000000', 's': '24',
                                      'i': input.id, 'f': 'txt_Dbbrnms' },
                            'effects': {}, 
                            'effects_query_string': '0&0&0&0&0&0&0&0&0&0'
                        };

                        this.config = this.config.include(new_cfg);
                        this.replace_cfg(new_cfg);
                        this.focus_cfg(new_cfg);
                    }

                }.bind(this),

                'keyup': function() {
                    this.focus.data.v = (input.getProperty('value') == '' ? 
                                         ' ' : input.getProperty('value'));
                    this.replace_cfg(this.focus);
                }.bind(this),

                'blur': function() {
                    this.save_config();
                }.bind(this)
            });
        }.bind(this));

        waiter.stop();
    }
});


var zit_custom_font_picker = new Class({
    options: {
        'callback': null,
        'txt_cancel': null,
        'fonts_src_uri': '/img/fonts/',
        'fonts_src_ext': '.png'
    },

    picker: null,
    element: null,

    set: function(font) {
        $$('#'+ this.element.id +' img').each(function(el) {
            el.src = this.options.fonts_src_uri + font + 
                     this.options.fonts_src_ext;
        }.bind(this));
    },

    start: function(main) {
        this.picker = new zit_custom_picker(main, {
            't': 10,
            'l': 10,
            'w': 170,
            'h': 250,
            'txt_cancel': this.options.txt_cancel
        });

        list_fonts.each(function(font) {
            var img = new Element('img', {
                'class': 'point',
                'src': this.options.fonts_src_uri + font + 
                       this.options.fonts_src_ext
            });

            this.picker.inject(img);

            img.addEvent('click', function() {
                this.element.src = img.src;
                this.options.callback(font);
                this.picker.destroy();
            }.bind(this));

        }.bind(this));

        this.picker.finalize();
    },

    initialize: function(el, main, options) {
        this.setOptions(options);
        this.element = el;

        el.addEvent('click', function() {
            this.start(main);
            return false;
        }.bind(this));
    }

}).implement(new Options);

var zit_custom_color_picker = new Class({
    options: {
        'callback': null,
        'txt_cancel': null
    },

    picker: null,
    element: null,

    set: function(hex) {
        this.element.setStyle('background-color', hex);
    },

    start: function(main) {
        this.picker = new zit_custom_picker(main, {
            't': 140,
            'l': 5,
            'txt_cancel': this.options.txt_cancel
        });

        cmyk_safe_colors.each(function(colors) {
            colors.each(function(hex) {
                var el = new Element('div').setStyles({
                    'float': 'left',
                    'margin': '1px',
                    'background-color': hex
                });

                var img = new Element('img', {'src':'/img/pix.gif'}).setStyles({
                    'width': '10px', 
                    'height': '10px', 
                    'margin': '1px',
                    'cursor': 'pointer',
                    'border': '1px solid #ccc'
                }).addEvent('click', function() {
                    this.element.setStyle('background-color', hex);
                    this.options.callback(hex);
                    this.picker.destroy();
                }.bind(this)).inject(el);
                
                this.picker.inject(el);
            }.bind(this));

            this.picker.inject(new Element('br').setStyle('clear', 'both'));
        }.bind(this));
    
        this.picker.finalize();
    },

    initialize: function(el, main, options) {
        this.setOptions(options);
        this.element = el;

        el.addEvent('click', function() { 
            this.start(main); 
            return false;
        }.bind(this));  
    }

}).implement(new Options);

var zit_custom_picker = new Class({
    options: { 
        't': 0, 'l': 0,
        'w': 0, 'h': 0,
        'txt_cancel': null
    },

    main: null,
    picker: null,
    container: null,

    inject: function(el) {
        el.inject(this.container);
        return this;
    },

    destroy: function() {
        this.picker.destroy();
    },

    finalize: function() {
        new Element('a', {'href': '#'}).addEvent('click', function() {
            this.picker.destroy();

        }.bind(this)).set('text', this.options.txt_cancel).setStyles({
            'font-size': '11px',
            'padding': '2px',
            'text-align': 'center',
            'border-top': '1px solid #ccc',
            'display': 'block',
            'color': 'red'
        }).inject(this.picker);

        this.picker.inject(this.main);
    },

    initialize: function(main, options) {
        this.setOptions(options);

        this.picker = new Element('div', {'class': 'zit_picker'}).setStyles({
            'background-color': '#fcf7ed',
            'border': '1px solid #cccccc',
            'position': 'absolute',
            'top': this.options.t, 'left': this.options.l 
        }).setOpacity(.9);        

        this.container = new Element('div');

        if (this.options.w > 0 && this.options.h > 0) {
            this.container.setStyles({
                'width': this.options.w,
                'height': this.options.h,
                'overflow': 'auto'
            });
        }

        this.main = main;
        this.container.inject(this.picker);
    }

}).implement(new Options);

var zit_custom_slider = new Class({
    options: {
        'range': [ 0, 120 ],
        'callback': null
    },

    id: null,

    knob: null,
    slide: null,
    input: null,

    button_up: null,
    button_down: null,

    slider: null,

    get: function() {
        return this.slider.step;
    },

    set: function(step) {
        this.slider.set(step);
    },

    initialize: function(id, options) {
        this.setOptions(options);

        this.slide = $(id);
        this.knob = $(id +'_knob');
        this.input = $(id +'_input');

        this.slider = new Slider(this.slide, this.knob, {
            range: this.options.range,
            onChange: function(step) {
                if (this.input != null) {
                    this.input.setProperty('value', step);    
                }
            }.bind(this),
            onComplete: this.options.callback
        });

        if (this.input != null) {
            this.input.addEvent('keyup', function() {
                this.set(this.input.getProperty('value').toInt());
            }.bind(this));
        }

        this.button_up = $(id +'_u');
        this.button_down = $(id +'_d');

        if (this.button_up != null) {
            this.button_up.addClass('point');
            this.button_up.addEvent('click', function() {
                this.set((this.get().toInt() + 1));
            }.bind(this));
        }

        if (this.button_down != null) {
            this.button_down.addClass('point');
            this.button_down.addEvent('click', function() {
                this.set((this.get().toInt() - 1));
            }.bind(this));
        }

        return this.slider;
    }

}).implement(new Options);

var zit_custom_effects_picker = new Class({
    options: {
        'callback': null,
        'txt_cancel': null,
        'txt_rotate': null,
        'txt_distort_arc': null,
        'txt_distort_polar': null,
        'txt_swirl': null,
        'txt_flop': null,
        'txt_shear': null,
        'txt_wave': null
    },

    picker: null,
    element: null,
    effects: null,

    get_checkbox: function(txt, id, tbody, checked) {
        var el = new Element('tr', {'id': 'tr_effect_'+ id});
        new Element('td').set('html', '<strong>'+ txt +':</strong>').inject(el);
        var td = new Element('td').inject(el);
        var checkbox = new Element('input', { 
            'id': 'effect_'+ id,
            'type': 'checkbox'
        }).inject(td);
        el.inject(tbody);

        if (this.effects.get(id)) {
            checked = this.effects.get(id).toInt();
        }

        if (checked > 0) {
            checkbox.setProperty('checked', true);
        }

        this.effects.set(id, checked);

        checkbox.addEvent('click', function() {
            var value = 0;

            if (checkbox.getProperty('checked') == true) {
                value = 1;
            }

            this.effects.set(id, value);
            this.options.callback(this.effects); 

        }.bind(this));
    },

    get_double_slide: function(txt, id, tbody, range1, range2, start1, start2) {
        var el = new Element('tr', {'id': 'tr_effect_'+ id});
        new Element('td').set('html', '<strong>'+ txt +':</strong>').inject(el);
        new Element('td').set('html',
            '<td>'+
            '   <table cellspacing="0" cellpadding="0">'+
            '   <tr>'+
            '       <td><img src="/img/icons/bullet_toggle_minus.png"'+
            '                id="effect_'+ id +'1_d" /></td>'+
            '       <td><div id="effect_'+ id +'1" class="slider_adv"'+
            '           style="width: 60px"><div id="effect_'+ id +'1_knob"'+
            '               class="knob"></div></div></td>'+
            '       <td><img src="/img/icons/bullet_toggle_plus.png"'+
            '                id="effect_'+ id +'1_u" /></td>'+
            '       <td><img src="/img/icons/bullet_toggle_minus.png"'+
            '                id="effect_'+ id +'2_d" /></td>'+
            '       <td><div id="effect_'+ id +'2" class="slider_adv"'+
            '           style="width: 60px"><div id="effect_'+ id +'2_knob"'+
            '               class="knob"></div></div></td>'+
            '       <td><img src="/img/icons/bullet_toggle_plus.png"'+
            '                id="effect_'+ id +'2_u" /></td>'+
            '   </tr>'+
            '   </table>'+
            '</td>'
        ).inject(el);
        el.inject(tbody);

        if (this.effects.get(id)) {
            var starts = this.effects.get(id);
            start1 = starts.s1.toInt();
            start2 = starts.s2.toInt();
        }

        this.effects.set(id, { s1: start1, s2: start2 });

        var slide1 = new zit_custom_slider('effect_'+ id +'1', {
            'range': range1,
            'callback': function(step) {
                this.effects.set(id, { s1: step, s2: slide2.step });
                this.options.callback(this.effects); 
            }.bind(this)
        });
        var slide2 = new zit_custom_slider('effect_'+ id +'2', {
            'range': range2,
            'callback': function(step) {
                this.effects.set(id, { s1: slide1.step, s2: step });
                this.options.callback(this.effects); 
            }.bind(this)
        }).set(start2);
        slide1.set(start1);
    },

    get_simple_slide: function(txt, id, tbody, range, start) {
        var el = new Element('tr', {'id': 'tr_effect_'+ id});
        new Element('td').set('html', '<strong>'+ txt +':</strong>').inject(el);
        new Element('td').set('html',
            '<td>'+
            '   <table cellspacing="0" cellpadding="0">'+
            '   <tr>'+
            '       <td><img src="/img/icons/bullet_toggle_minus.png"'+
            '                id="effect_'+ id +'_d" /></td>'+
            '       <td><div id="effect_'+ id +'" class="slider_adv"'+
            '           style="width: 140px"><div id="effect_'+ id +'_knob"'+
            '               class="knob"></div></div></td>'+
            '       <td><img src="/img/icons/bullet_toggle_plus.png"'+
            '                id="effect_'+ id +'_u" /></td>'+
            '   </tr>'+
            '   </table>'+
            '</td>'
        ).inject(el);
        el.inject(tbody);

        if (this.effects.has(id)) {
            start = this.effects.get(id).toInt();
        }

        this.effects.set(id, start);

        var slide = new zit_custom_slider('effect_'+ id, {
            'range': range,
            'callback': function(step) {
                this.effects.set(id, step);
                this.options.callback(this.effects); 
            }.bind(this)
        }).set(start);
    },

    start: function(main) {
        this.picker = new zit_custom_picker(main, {
            't': 25,
            'l': 10,
            'txt_cancel': this.options.txt_cancel
        }); 

        this.effects = $H(this.options.st_callback());

        var table = new Element('table').setStyle('width', 310);
        var tbody = new Element('tbody').inject(table);

        this.picker.inject(table).finalize();

        this.effects.set('shear', { s1: 0, s2: 0 }); 
        this.effects.set('wave', { s1: 0, s2: 0 }); 

        if (this.options.txt_rotate) {
            this.get_simple_slide(this.options.txt_rotate, 'rotate', tbody, [0, 360], 0);
        }
        if (this.options.txt_distort_arc) {
            this.get_simple_slide(this.options.txt_distort_arc, 'distort_arc', tbody, [0, 360], 0);
        }
        if (this.options.txt_distort_polar) {
            this.get_simple_slide(this.options.txt_distort_polar, 'distort_polar', tbody, [0, 360], 0);
        }
        if (this.options.txt_swirl) {
            this.get_simple_slide(this.options.txt_swirl, 'swirl', tbody, [0, 180], 0);
        }
        if (this.options.txt_shear) {
            this.get_double_slide(this.options.txt_shear, 'shear', tbody, [0, 50], [0, 50], 0, 0);
        }
        if (this.options.txt_wave) {
            this.get_double_slide(this.options.txt_wave, 'wave', tbody, [0, 100], [0, 100], 0, 0);
        }
        if (this.options.txt_flop) {
            this.get_checkbox(this.options.txt_flop, 'flop', tbody, 0);
        }
    },

    initialize: function(el, main, options) {
        this.setOptions(options);
        this.element = el;

        el.addEvent('click', function() { 
            this.start(main); 
            return false;
        }.bind(this));  
    }

}).implement(new Options);

zit_custom.implement(new Options);
zit_custom.implement(new Events);

/* motif helpers */
function zit_load_motif(font, label) {
    var config = $A([]);
    var focus_tab = Cookie.read('ftswapper');

    if ((config_cookie = Cookie.read('cfg')) != null) {
        config = $A(JSON.decode(config_cookie));
    }
    
    config = config.include({
        'tab': (focus_tab != null ? focus_tab.toInt() : 0),
        'id': font +'_'+ label,
        'type': 'symbol',
        'drag': { 'x': 0, 'y': 0, 'z': 0 },
        'data': { 'l': label, 'c': '000000', 's': 60, 'f': font },
        'effects': {},          
        'effects_query_string': '0&0&0&0&0&0&0&0&0&0'
    });    

    Cookie.write('cfg', JSON.encode(config), {path: '/'});        
    window.location.href = $('return').getProperty('href');
}

/* xxx: merge */

function zit_load_motif_no_redirect(font, label) {
    var config = $A([]);
    var focus_tab = Cookie.read('ftswapper');

    if ((config_cookie = Cookie.read('cfg')) != null) {
        config = $A(JSON.decode(config_cookie));
    }
    
    config = config.include({
        'tab': (focus_tab != null ? focus_tab.toInt() : 0),
        'id': font +'_'+ label,
        'type': 'symbol',
        'drag': { 'x': 0, 'y': 0, 'z': 0 },
        'data': { 'l': label, 'c': '000000', 's': 60, 'f': font },
        'effects': {},          
        'effects_query_string': '0&0&0&0&0&0&0&0&0&0'
    });    

    Cookie.write('cfg', JSON.encode(config), {path: '/'});        
    window.location.reload();
}

/* upload helpers */

function zit_upload() {
    if ((config_cookie = Cookie.read('cfg')) != null) {
        config = $A(JSON.decode(config_cookie));
    }

    cgu = $('accept_cgu');

    cgu.addEvent('click', function() {
        if (cgu.checked == true) {
            $('import_img').removeClass('hide');
        } else {
            $('import_img').addClass('hide');
        }
    });

    swf = new SWFUpload({
        upload_url: "/_upload.php",

        file_size_limit: "12 MB",
        file_types: "*.jpg; *.JPG; *.gif; *.png; *.jpeg; *.JPEG",
        file_types_description: "JPG, GIF et PNG Seulement",
        file_upload_limit: 5,

        file_queue_error_handler: zit_upload_file_queue_error,
        file_dialog_complete_handler: zit_upload_file_dialog_complete,
        upload_progress_handler: zit_upload_progress,
        upload_error_handler: zit_upload_error,
        upload_success_handler: zit_upload_success,
        upload_complete_handler: zit_upload_complete,

        button_image_url: "/img/buttons/import_swf.gif",
        button_placeholder_id: "upload_button_swf",
        button_width: 153,
        button_height: 20,
        button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
        button_cursor: SWFUpload.CURSOR.HAND,

        flash_url: "/swf/swfupload.swf"
    });
}

function zit_upload_notice(notice) {
    $('upload_notice').set('text', notice).highlight('#0066cc'); 
}

function zit_upload_file_queue_error(file, code, msg) {
    switch (code) {

    case SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED: 
        zit_upload_notice('Erreur: vous avez sélectionné beaucoup trop de photos');    
        break;
        
    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
        zit_upload_notice('Erreur: le fichier est vide');    
        break;

    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 
        zit_upload_notice('Erreur: le fichier est trop gros (> 8 MB)');    
        break;

    default:
    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 
        zit_upload_notice('Erreur: le fichier est invalide');    
        break;
    }
}

function zit_upload_file_dialog_complete(selected, queued) {
    if (queued > 0) {
        this.startUpload();
    }
}

function zit_upload_progress(file, bytes) {
    percent = Math.ceil((bytes / file.size) * 100);

    if (percent == 100) {
        zit_upload_notice('Création des miniatures, veuillez patienter ...'); 

    } else {
        zit_upload_notice('Téléchargement en cours... ('+ percent +'%)'); 
    }
}

function zit_upload_error(file, code, msg) {
    switch (code) {
    }
    zit_upload_notice('Erreur ('+ code +'): '+ msg);
}

var drag_y = 5;
var drag_x = 5;

function zit_upload_success(file, response) {
    json = JSON.decode(response);
    if (!json) {
        return zit_upload_notice('Echec lors de l\'enregistrement');
    }

    drag_x += 5;
    drag_y += 5;

    var focus_tab = Cookie.read('ftswapper');

    config = config.include({
        'tab': (focus_tab != null ? focus_tab.toInt() : 0),
        'id':  json.id,
        'type': 'upload',
        'drag': { 'x': drag_x, 'y': drag_x , 'z': 0 },
        'data': { 'json': json, 's': 100 }
    });

    Cookie.write('cfg', JSON.encode(config), {path: '/'});        
    zit_upload_notice('['+ file.name +'] terminé');
}

function zit_upload_complete(file) {
    if (this.getStats().files_queued > 0) {
        this.startUpload();

    } else {
        window.location.href = $('return').getProperty('href');
    }    
}


/* _cmyk_colors.js */

var cmyk_safe_colors = $A([
    ['#ffffff','#fed7c7','#ffd4a2','#fffab0','#fffdd9','#add8a9','#a7e0ec','#d5f0f6','#d2cce3','#fcdaeb'],
    ['#d6d6d6','#fe8267','#ffab72','#fff886','#fff75d','#7bc6a5','#32c0d9','#74d0e3','#a29bc8','#f9b3d5'],
    ['#cccccc','#ff3c2c','#ffa935','#ffd37c','#fff743','#49aa64','#76b5c2','#31a3cb','#726d9d','#cf84a9'],
    ['#aaaaaa','#d73123','#ff802f','#ffd156','#ffd13b','#4a8e35','#0093ae','#3164ac','#6e4a9f','#cc5992'],
    ['#7a7a7a','#ab251a','#d97c28','#d9a74d','#afa429','#095d2f','#3e8695','#31439d','#6f2976','#a3517a'],
    ['#444444','#7b170f','#ac4a1b','#ac7943','#7e761b','#05421f','#41666e','#00175b','#3b3c70','#764960'],
    ['#000000','#440905','#7c4412','#794638','#46410b','#02220d','#002c35','#000e40','#3b1b5c','#3f0c23']
]);

/* _fonts.js */

var list_fonts = $A(['txt_revolt','txt_dblftr16','txt_abite','txt_Font_Doll','txt_arial','txt_comic','txt_Dbbrnms','txt_YIKES','txt_iArnold_font','txt_Marcsc___','txt_Pamela','txt_JISolidBallonCaps','txt_Volter__28Goldfish_29','txt_cheri','txt_hawaii','txt_newfacebook','txt_teamspir','txt_12tonfishstick','txt_12tonsushi','txt_BILLO___','txt_CAB_____','txt_Blazed','txt_Bleeding_Cowboys','txt_Blomster','txt_Blox2','txt_BoneHymie','txt_CARACURA','txt_CocaineSans','txt_CaptureIt2','txt_armalite','txt_BASILEUS','txt_CaptureIt','txt_CHICK___','txt_LMS','txt_digital-7','txt_whoa','txt_FMUNIVER','txt_drifttyp','txt_Esquisito','txt_DISKOTEQUE','txt_dirt2','txt_GEEK','txt_FontdinerdotcomSparkly','txt_KIDTYPER','txt_HawaiiLover','txt_HVD_Peace','txt_indigojo','txt_Twelve','txt_holiday','txt_BABYBLOC','txt_akka','txt_LUNABAR_','txt_Krystal','txt_VTKSbandane','txt_NASHVILL','txt_MadScience','txt_XXII_ARABIAN-ONENIGHTSTAND','txt_Movie-Star','txt_mtf_chunkie','txt_SPIRI___','txt_OhMyGodStars','txt_oreos','txt_OUTLAW','txt_Paskowy','txt_Pulse_virgin','txt_street','txt_Snowflake','txt_RUFA','txt_MARCS___','txt_scoreboard','txt_SUMDUMGO','txt_stonehen','txt_SUNSET__','txt_WELTRON2','txt_WELTSP__','txt_Resident','txt_Back_In_the_USSR_DL_k','txt_celticmd','txt_AIRSTREA','txt_GROOT___','txt_JIBallonCaps','txt_EYESIS__','txt_CircusOrnate','txt_Maternellcolor','txt_Comic_Andy','txt_varsity_regular']);