/**
 * @author Ermek
 * @copyright Hire-Experts LLC
 * @version Styler 3.2
 */

var he_styler = 
{
    page: 'profile',
    page_id: 0,
    default_skin_id: 0,
    request_url: '',
    no_css_src: './templates/he_styler_no_css.css',

    visible: false,
    make_skin_disabled: false,
    edit_skin_disabled: false,
    delete_skin_disabled: false,
    clean_styles: false,

    skin_id: 0,
    active_skin_id: 0,

    groups: {},
    values: {},
    rules: {},
    skins: {},
    default_skins: {},

    shared_skins: {},
    history_skins: {},

    shared_skins_carousel: {},
    history_skins_carousel: {},

    construct: function()
    {
        var self = this;

        this.request_url = 'he_styler_uploader.php?styler_page=' + this.page + '&styler_page_id=' + this.page_id;
        this.default_skins[this.default_skin_id] = 1;

        if ( this.page == 'group' ) {
            this.inject_group_page_menu();
        }

        this.$container = $('he_styler');
        this.$fake_container = $('he_styler_fake_cont');
        this.$loading = $('he_styler_loading');
        this.$styler_css = $('styler_css');
        this.$destruct_css = $('destruct_css');
        this.$custom_destruct_css = $('custom_destruct_css');

        this.$skin_history_item_tpl = $('skin_history_item_tpl');

        $('save_skin_id').addEvent('click', function() {
            this.disabled = true;
            self.save_skin();
        });

        $$('.select_skin_btn').addEvent('click', function(){
            self.select_skin(this);
        });

        $('cancel_share_skin_btn').addEvent('click', function(){
            $('share_skin_block').setStyle('display', 'none');
            $('select_skin_block').setStyle('display', 'block');
        });

        this.shared_skins_carousel = new he_styler_skins({
            type: 'shared_skins',
            $container: $('shared_skins_cont').getElement('.styler_skins'),
            $items: $('shared_skins_cont').getElements('.skin_history_item'),
            count: self.shared_skins.count,
            $left_btn: $('shared_skins_prev'),
            $right_btn: $('shared_skins_next'),
            $loading: $('shared_skins_cont').getElement('.page_loading')
        });

        this.history_skins_carousel = new he_styler_skins({
            type: 'history_skins',
            $container: $('history_skins_cont').getElement('.styler_skins'),
            $items: $('history_skins_cont').getElements('.skin_history_item'),
            count: self.history_skins.count,
            $left_btn: $('history_skins_prev'),
            $right_btn: $('history_skins_next'),
            $loading: $('history_skins_cont').getElement('.page_loading')
        });


        this.prepare_tools();

        this.prepare_select_skin('shared_skins');
        this.prepare_select_skin('history_skins');
    },

    prepare_tools: function()
    {
        var self = this;

          for ( var group_id in this.groups )
        {
            var group = this.groups[group_id];
            this.values[group_id] = ( this.values[group_id]==undefined ) ? {} : this.values[group_id];

            group.$node = (group.js_selector.contains('.') || group.js_selector.contains(',') || group.js_selector=='body')
                ? $$(group.js_selector)
                : $(group.js_selector);

            group.node = function(tool_key)
            {
                return self.get_node(this, tool_key);
            };

            if ( group.background_color==1 ) {
                this.create_bg_color(group);
            }

            if ( group.border_color==1 ) {
                this.create_border_color(group);
            }

            if ( group.border_style==1 ) {
                this.create_border_style(group);
            }

            if ( group.border_width==1 ) {
                this.create_border_width(group);
            }

            if ( group.background_image==1 ) {
                this.create_bg_image(group);
            }

            if ( group.background_position==1 ) {
                this.create_bg_position(group);
            }

            if ( group.background_repeat==1 ) {
                this.create_bg_repeat(group);
            }

            if ( group.font_family==1 ) {
                this.create_font_family(group);
            }

            if ( group.font_size==1 ) {
                this.create_font_size(group);
            }

            if ( group.font_color==1 ) {
                this.create_font_color(group);
            }
        }
    },

    prepare_styles: function()
    {
        for ( var group_id in this.values )
        {
            var group = this.groups[group_id];
            var value = this.values[group_id];

            if ( group.background_color==1 ) {
                this.set_bg_color(group);
            }

            if ( group.border_color==1 && (value.border_color || value.border_style || value.border_width) ) {
                this.set_border(group);
            }

            if ( (group.font_color==1 || group.font_family==1 || group.font_size==1) &&
                 (value.font_color || value.font_family || value.font_size) )
            {
                this.set_font_style(group);
                this.set_font_style_preview(group);
            }

            if ( group.background_image == 1 )
            {
                this.set_bg_image_preview(group_id);

                if ( value.background_image )
                {
                    this.set_bg_image(group_id);
                }
            }
        }
    },

    destruct_styles: function()
    {
        var group_styles = {
            'background_color':'background-color',
            'background_image':'background-image',
            'background_position':'background-position',
            'background_repeat':'background-repeat',
            'font_color':'color',
            'font_family':'font-family',
            'font_size':'font-size',
            'border_color':'border-color',
            'border_style':'border-style',
            'border_width':'border-width'};

        for ( var group_id in this.groups)
        {
            var group = this.groups[group_id];
            var value = this.values[group_id];


            for ( var tool_key in group_styles )
            {
                if ( group[tool_key]==1 && value[tool_key] )
                {
                    group.node(tool_key).setStyle(group_styles[tool_key], '');
                }
            }
        }
    },

    toggle_styler: function()
    {
        if ( this.visible  )
        {
            this.$fake_container.tween('height', [200, 0]);
            this.$container.tween('top', [0, -200]);
        }
        else
        {
            this.$fake_container.tween('height', [0, 200]);
            this.$container.tween('top', [-200, 0]);
        }

        this.visible = !( this.visible );
    },

    inject_group_page_menu: function()
    {
        var $group_menu = $$('.profile_menu').getElement('tbody');
        var $group_menu_item = $('he_styler_group_menu');

        $group_menu.grab($group_menu_item);
    },

    make_skin: function()
    {
        var self = this;

        this.$styler_css.setProperty('href', this.no_css_src);
        this.include_destruct_css();

        if ( this.make_skin_disabled ) {
            return false;
        }

        this.make_skin_disabled = true;

        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: {    'task': 'make_skin', 'no_cache': Math.random() },
            onSuccess : function(response)
            {
                if ( response )
                {
                    self.set_new_skin(response.skin_info, response.values);
                }
                else
                {
                    alert(response.message);
                }
            }
        }).send();
    },

    set_new_skin: function( skin_info, values )
    {
        this.destruct_styles();

        $('save_skin_name').value = skin_info.name;
        $('save_skin_name').setStyle('display', 'block');

        this.skin_id = skin_info.id;
        this.values = values;
        this.prepare_styles();
    },

    get_node: function( group, tool_key )
    {
        var tool_key = tool_key;

        if ( tool_key==undefined ) { return group.$node; }

        if ( this.rules[group.id] && this.rules[group.id][tool_key] && this.rules[group.id][tool_key].js_selector )
        {
            var tool_selector = this.rules[group.id][tool_key];

            if ( tool_selector.$node==undefined ) {
                var sel = tool_selector.js_selector;
                tool_selector.$node = (sel.contains('.') || sel.contains(',') || sel=='body') ? $$(sel) : $(sel);
            }

            return tool_selector.$node;
        }

        return this.groups[group.id].$node;
    },

    create_bg_color: function( group )
    {
        var self = this;
        var value = this.values[group.id];

        var he_rainbow_id = 'bg_color_' + group.id;
        var he_rainbow_obj = 'bg_color_obj' + group.id;

        group.bg_color = {};
        group.bg_color.$color_box = $(he_rainbow_id);

        $('clear_bg_color_' + group.id).addEvent('click', function(){
            self.values[group.id].background_color = 'transparent';
            self.set_bg_color(group);
        });

        var background_color = value.background_color;
        background_color = ( background_color && background_color!='transparent' ) ? background_color : false;
        var startColor = ( background_color ) ? this.hex_to_rgb(background_color) : [255, 255, 255];

        group.bg_color.rainbow = new MooRainbow(he_rainbow_id, {
            'id': he_rainbow_obj,
            'startColor': startColor,
            'onChange': function(color)
            {
                self.values[group.id].background_color = color.hex;
                self.set_bg_color(group);
            }
        });
    },

    create_border_color: function( group )
    {
        var self = this;
        var value = this.values[group.id];
        var he_rainbow_id = 'border_color_' + group.id;
        var he_rainbow_obj = 'border_color_obj' + group.id;

        group.br_color = {};
        group.br_color.$br_color_box = $(he_rainbow_id);

        $('clear_border_color_' + group.id).addEvent('click', function(){
            self.values[group.id].border_color = 'transparent';
            self.set_border(group);
        });

        var border_color = value.border_color;
        border_color = ( border_color && border_color!='transparent' ) ? border_color : false;
        var startColor = ( border_color ) ? this.hex_to_rgb(border_color) : [255, 255, 255];

        group.br_color.rainbow = new MooRainbow(he_rainbow_id, {
            'id': he_rainbow_obj,
            'startColor': startColor,
            'onChange': function(color) {
            self.values[group.id].border_color = color.hex;
                self.set_border(group);
            }
        });
    },

    create_border_style: function( group )
    {
        var self = this;

        group.br_style = {};
        group.br_style.$border_styles = $('border_style_' + group.id).getElements('li');

        group.br_style.$border_styles.addEvent('click', function(){
            self.values[group.id].border_style = $(this).getAttribute('value');
            self.set_border(group);
        });
    },

    create_border_width: function( group )
    {
        var self = this;

        group.br_width = {};
        group.br_width.$border_width = $('border_width_' + group.id).getElements('li');

        group.br_width.$border_width.addEvent('click', function(){
            self.values[group.id].border_width = $(this).getAttribute('value');
            self.set_border(group);
        });
    },

    create_bg_image: function( group )
    {
        var self = this;

        group.$bg_image_preview = $('bg_image_'+group.id);

        group.$bg_image_preview.addEvent('click', function(){
            self.set_bg_image(group.id);
        });

        $('clear_bg_image_' + group.id).addEvent('click', function(){
            self.delete_image(group);
        });
    },

    create_bg_position: function( group )
    {
        var self = this;

        group.$bg_positions = $('bg_image_position_' + group.id).getElements('td');

        group.$bg_positions.addEvent('click', function() {
            group.$bg_positions.removeClass('active');
            $(this).addClass('active');

            var position = $(this).getAttribute('value');
            self.values[group.id].background_position = position;
            self.set_bg_image(group.id);
        });
    },

    create_bg_repeat: function( group )
    {
        var self = this;

        group.$bg_repeat = $('background_repeat_' + group.id);

        group.$bg_repeat.addEvent('change', function(){
            var repeat = $(this).value;
            self.values[group.id].background_repeat = repeat;
            self.set_bg_image(group.id);
        });
    },

    create_font_family: function( group )
    {
        var self = this;

        group.$font_family = $('font_family_' + group.id);

        group.$font_family.addEvent('change', function(){
            self.values[group.id].font_family = $(this).value;

            self.set_font_style_preview(group);
            self.set_font_style(group);
        });
    },

    create_font_size: function( group )
    {
        var self = this;

        group.$font_size = $('font_size_' + group.id);

        group.$font_size.addEvent('change', function(){
            self.values[group.id].font_size = $(this).value;

            self.set_font_style_preview(group);
            self.set_font_style(group);
        });
    },

    create_font_color: function( group )
    {
        var self = this;
        var value = this.values[group.id];

        var he_rainbow_id = 'font_preview_' + group.id;
        var he_rainbow_obj = 'font_preview_obj' + group.id;

        group.fnt_color = {};
        group.fnt_color.$fnt_color_box = $(he_rainbow_id);


        $('clear_font_color_' + group.id).addEvent('click', function(){
            self.values[group.id].font_color = 'transparent';
            self.set_font_style(group);
            self.set_font_style_preview(group);
        });

        var font_color = value.font_color;
        font_color = ( font_color && font_color!='transparent' ) ? font_color : false;
        var startColor = ( font_color ) ? this.hex_to_rgb(font_color) : [68, 68, 68];

        group.fnt_color.rainbow = new MooRainbow(he_rainbow_id, {
            'id': he_rainbow_obj,
            'startColor': startColor,
            'onChange': function(color) {
                self.values[group.id].font_color = color.hex;
                self.set_font_style(group);
                self.set_font_style_preview(group);
            }
        });
    },

    hex_to_rgb: function( hex_color )
    {
        var rgb_color = [];
        hex_color = ( hex_color.charAt(0)=="#" ) ? hex_color.substring(1,7) : hex_color;

        if ( hex_color.length == 3 )
        {
            hex_color = hex_color[0] + hex_color[0] + hex_color[1] + hex_color[1] + hex_color[2] + hex_color[2];
        }

        rgb_color[0] = parseInt(hex_color.substring(0,2), 16);
        rgb_color[1] = parseInt(hex_color.substring(2,4), 16);
        rgb_color[2] = parseInt(hex_color.substring(4,6), 16);

        return rgb_color;
    },

    upload_image: function( group_id, node )
    {
        var self = this;
        var $form_div = $('bg_image_upload_div_'+group_id);
        var $form_node = $form_div.getElement('.bg_image_upload_form');
        var $loading = $form_div.getElement('.he_styler_loading');
        var $form_input = $('bg_image_input_'+group_id);

        if ( $loading==null )
        {
            $loading = this.$loading.clone().setStyle('display', 'none').removeProperty('id');
            $form_div.adopt($loading);
        }

        return AIM.submit(node, {
            'onStart': function()
            {
                $form_node.getElement('.bg_image_skin_id').value = he_styler.skin_id;
                $form_node.setStyle('display', 'none');
                $loading.setStyle('display', 'block');
            },
            'onComplete': function(response)
            {
                eval('var response = ' + response);

                $form_input.value = '';
                $loading.setStyle('display', 'none');
                $form_node.setStyle('display', 'block');

                if ( response.result==0 )
                {
                    alert(response.message);
                }
                else
                {
                    self.values[group_id].background_image = response.src;
                    self.set_bg_image_preview(group_id);
                    self.set_bg_image(group_id);
                }
            }
        });
    },

    set_bg_color: function( group )
    {
        var value = this.values[group.id];

        if ( group.background_color!=1 )
        {
            return false;
        }

        if ( !this.values[group.id].background_color )
        {
            group.bg_color.$color_box.setStyle('background-color', '');
            return false;
        }

        if ( !value.background_image || !value.background_image=='none' )
        {
            value.background_image = 'none';
            this.set_bg_image(group.id);
        }

        group.bg_color.$color_box.setStyle('background-color', value.background_color);
        group.node('background_color').setStyle('background-color', value.background_color);
    },

    set_bg_image_preview: function( group_id )
    {
        var group = this.groups[group_id];
        var value = this.values[group_id];

        if ( !value.background_image || value.background_image=='none' )
        {
            group.$bg_image_preview.set('html', '');
            group.$bg_image_preview.addClass('bg_image_box');

            return false;
        }

        value.bg_image_src = './uploads_styler/' + value.background_image + '?' + Math.random();

        var photo = new Image();
        photo.src = value.bg_image_src;

        group.$bg_image_preview.removeClass('bg_image_box');
        group.$bg_image_preview.set('html', '');
        group.$bg_image_preview.adopt(photo);
    },

    set_bg_image: function(group_id)
    {
        var group = this.groups[group_id];
        var value = this.values[group_id];

        if ( !value.background_image ){
            return false;
        }

        if ( group.background_position==1 && value.background_position )
        {
            group.node('background_position').setStyle('background-position', value.background_position);

            group.$bg_positions.removeClass('active');
            for ( var i = 0; i < group.$bg_positions.length; i++ )
            {
                var $bg_position = group.$bg_positions[i];

                if ( $bg_position.getAttribute('value')==value.background_position )
                {
                    $bg_position.addClass('active');
                }
            }
        }

        if ( group.background_repeat==1 && value.background_repeat )
        {
            group.node('background_repeat').setStyle('background-repeat', value.background_repeat);
            group.$bg_repeat.value = value.background_repeat;
        }

        var background_image = ( value.background_image=='none' ) ? 'none' : 'url(' + value.bg_image_src + ')';

        group.node('background_image').setStyle('background-image', background_image);
    },

    set_border: function( group )
    {
        var value = this.values[group.id];

        if ( group.border_color==1 )
        {
            group.node('border_color').setStyle('border-color', value.border_color);
            group.br_color.$br_color_box.setStyle('background-color', value.border_color);
        }

        if ( group.border_style==1 && value.border_style )
        {
            group.node('border_style').setStyle('border-style', value.border_style);

            group.br_style.$border_styles.removeClass('selected');
            for ( var i = 0; i < group.br_style.$border_styles.length; i++ )
            {
                var $br_style = group.br_style.$border_styles[i];

                if ( $br_style.getAttribute('value')==value.border_style )
                {
                    $br_style.addClass('selected');
                }
            }
        }

        if ( group.border_width==1 && value.border_width )
        {
            group.node('border_width').setStyle('border-width', value.border_width);

            group.br_width.$border_width.removeClass('selected');
            for ( var i = 0; i < group.br_width.$border_width.length; i++ )
            {
                var $br_width = group.br_width.$border_width[i];

                if ( $br_width.getAttribute('value')==value.border_width )
                {
                    $br_width.addClass('selected');
                }
            }
        }
    },

    set_font_style: function( group )
    {
        var value = this.values[group.id];

        if ( group.font_family==1 && value.font_family )
        {
            group.node('font_family').setStyle('font-family', value.font_family);
            group.$font_family.value = value.font_family;
        }

        if ( group.font_size==1 && value.font_size )
        {
            group.$font_size.value = value.font_size;
            group.node('font_size').setStyle('font-size', value.font_size);
        }

        if ( group.font_color==1 && value.font_color ) {
            group.node('font_color').setStyle('color', value.font_color);
        }

    },

    set_font_style_preview: function( group )
    {
        var value = this.values[group.id];

        group.$font_preview = ( group.$font_preview==undefined ) ? $('font_preview_' + group.id) : group.$font_preview;

        if ( group.font_family==1 && value.font_family ) {
            group.$font_preview.setStyle('font-family', value.font_family);
        }
        if ( group.font_size==1 && value.font_size ) {
            group.$font_preview.setStyle('font-size', value.font_size);
        }
        if ( group.font_color==1 && value.font_color ) {
            group.$font_preview.setStyle('color', value.font_color);
        }

    },

    delete_image: function(group)
    {
        var self = this;
        var value = this.values[group.id];

        if ( !value.background_image.length || value.background_image=='none' )
        {
            value.background_image=='none';
            return false;
        }

        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: {    'task': 'delete_image', 'skin_id': self.skin_id, 'group_id':group.id, 'bg_image': value.background_image, 'no_cache': Math.random() },
            onSuccess : function(response) {
                if ( response.result ) {
                    value.background_image = 'none';
                    value.bg_image_src = '';
                    group.$bg_image_preview.set('html', '');
                    group.$bg_image_preview.addClass('bg_image_box');

                    self.set_bg_image(group.id);
                }
            }
        }).send();
    },

    save_skin: function()
    {
        var self = this;

        var name = $('save_skin_name').value;

        if ( name.trim().length==0 || name==SELanguage.Translate(690702057) )
        {
            alert(SELanguage.Translate(690702068));
            $('save_skin_id').disabled = false;
            return false;
        }

        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: {    'task': 'save_skin', 'skin_id': self.skin_id, 'name': name, 'values': self.values, 'no_cache': Math.random() },
            onSuccess : function(response) {
                if ( response.result ) {
                    alert(response.message);
                }
                else {
                    alert(response.message);
                }
                $('save_skin_id').disabled = false;
                self.make_skin_disabled = false;
            }
        }).send();
    },

    prepare_select_skin: function( type )
    {
        var self = this;

        if ( type == 'shared_skins' )
        {
            var skins = this.shared_skins.skins;
            var count = this.shared_skins.count;
            var $container = this.shared_skins_carousel.$container;
            var id_prefix = 's';
        }
        else
        {
            var skins = this.history_skins.skins;
            var count = this.history_skins.count;
            var $container = this.history_skins_carousel.$container;
            var id_prefix = 'h';
        }

        if ( count == 0 )
        {
            return false;
        }

        for ( var skin_id in skins)
        {
            var $select_skin = $container.getElementById(id_prefix + '_select_skin_' + skin_id);

            $select_skin.addEvent('click', function()
            {
                var skin_id = this.id.substr(14);
                self.active_skin_id = skin_id;

                if ( self.clean_styles )
                {
                    self.destruct_styles();
                    self.clean_styles = false;
                }

                self.get_skin_css(skin_id);

                $(this).getParent('.styler_skins').getElements('.active').removeClass('active');
                $(this).addClass('active');
            });

            if ( type == 'shared_skins' ) { continue; }

            var $edit_skin = $container.getElementById(id_prefix +'_edit_skin_' + skin_id);
            var $share_skin = $container.getElementById('share_skin_' + skin_id);
            var $delete_skin = $container.getElementById('delete_skin_' + skin_id);

            $edit_skin.addEvent('click', function()
            {
                var skin_id = this.id.substr(12);

                self.edit_skin(skin_id);

                he_styler_menu.show_menu('make_skin', $('make_skin_menu_item'));
            });

            $share_skin.addEvent('click', function()
            {
                var skin_id = this.id.substr(11);

                $('photo_skin_id').value = skin_id;
                $('share_skin_name').value = self.history_skins.skins[skin_id].name;

                $('select_skin_block').setStyle('display', 'none');
                $('share_skin_block').setStyle('display', 'block');

            });

            $delete_skin.addEvent('click', function()
            {
                var skin_id = this.id.substr(12);

                self.delete_skin(skin_id);
            });
        }
    },

    load_skins: function( type, skins )
    {
        var self = this;

        if ( type == 'shared_skins' )
        {
            var all_skins = this.shared_skins.skins;
            var $container = this.shared_skins_carousel.$container;
            var id_prefix = 's';
        }
        else
        {
            var all_skins = this.history_skins.skins;
            var $container = this.history_skins_carousel.$container;
            var id_prefix = 'h';
        }

        for ( var skin_id in skins )
        {
            all_skins[skin_id] = skins[skin_id];
            
            var $skin_tpl = this.$skin_history_item_tpl.clone();
            $skin_tpl.removeProperty('id');
            $skin_tpl.setStyle('width', 85);
            $skin_tpl.setStyle('float', 'left');
            $skin_tpl.setStyle('margin-right', 5);

            var photo = new Image();
            var photo_src = './uploads_styler/';
            photo_src += ( skins[skin_id].photo ) ? skins[skin_id].photo : 'default_photo.jpg';
            photo.src = photo_src;

            $skin_tpl.getElement('.skin_photo')
                .setProperty('id', id_prefix + '_select_skin_' + skin_id)
                .addEvent('click', function()
                {
                    var skin_id = this.id.substr(14);
                    self.active_skin_id = skin_id;

                    if ( self.clean_styles )
                    {
                        self.destruct_styles();
                        self.clean_styles = false;
                    }

                    self.get_skin_css(skin_id);

                    $(this).getParent('.styler_skins').getElements('.active').removeClass('active');
                    $(this).addClass('active');
                })
                .adopt(photo);

            $skin_tpl.getElement('.skin_list_name').set('text', skins[skin_id].name);

            if ( type == 'shared_skins' )
            {
                $container.adopt($skin_tpl);
                continue;
            }

            $skin_tpl.getElement('.edit_skin').setProperty('id', id_prefix + '_edit_skin_' + skin_id).addEvent('click', function()
            {
                var skin_id = this.id.substr(12);
                
                self.edit_skin(skin_id);

                he_styler_menu.show_menu('make_skin', $('make_skin_menu_item'));
            });

            $skin_tpl.getElement('.share_skin').setProperty('id', 'share_skin_' + skin_id).addEvent('click', function()
            {
                var skin_id = this.id.substr(11);

                $('photo_skin_id').value = skin_id;
                $('share_skin_name').value = self.history_skins.skins[skin_id].name;

                $('select_skin_block').setStyle('display', 'none');
                $('share_skin_block').setStyle('display', 'block');
            });

            $skin_tpl.getElement('.delete_skin').setProperty('id', 'delete_skin_' + skin_id).addEvent('click', function()
            {
                var skin_id = this.id.substr(12);

                self.delete_skin(skin_id);
            });

            $skin_tpl.addEvent('mouseover', function(){
                this.getElement('.skin_actions').setStyle('visibility', 'visible');
            });

            $skin_tpl.addEvent('mouseout', function(){
                this.getElement('.skin_actions').setStyle('visibility', 'hidden');
            });

            $container.adopt($skin_tpl);

            self.default_skins[skin_id] = self.history_skins.skins[skin_id].default_skin;
        }
    },

    get_skin_css: function( skin_id )
    {
        var self = this;
        var skin = ( this.shared_skins.skins[skin_id]==undefined )
            ? this.history_skins.skins[skin_id]
            : this.shared_skins.skins[skin_id];

        var default_skin = ( this.default_skins[skin_id]==1 );
        var css_href = ( default_skin ) ? this.no_css_src : skin.css_href;
        
        window.setTimeout(function(){
            self.$styler_css.setProperty('href', css_href);
            
            self.toggle_destruct_css(!default_skin);
        }, 200);
    },

    edit_skin: function( skin_id )
    {
        var self = this;

        this.$styler_css.setProperty('href', this.no_css_src);
        this.include_destruct_css();
        
        this.edit_skin_disabled = true;

        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: {    'task': 'get_skin_values', 'skin_id': skin_id, 'no_cache': Math.random() },
            onSuccess : function(response)
            {
                if ( response.result )
                {
                    self.set_new_skin(response.skin_info, response.values);
                }
                else
                {
                    alert(response.message);
                }

                self.edit_skin_disabled = false;
            }
        }).send();
    },

    select_skin: function( node )
    {
        var self = this;

        node.disabled = true;
        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: { 'task': 'select_skin', 'skin_id': this.active_skin_id, 'no_cache': Math.random() },
            onSuccess : function(response)
            {
                if ( response.result )
                {
                    self.active_skin_id = response.skin_id;
                    alert(response.message);
                }
                else
                {
                    alert(response.message);
                }

                node.disabled = false;
            }
        }).send();
    },

    share_skin: function( node )
    {
        return AIM.submit(node, {
            'onStart': function()
            {
            },
            'onComplete': function(response)
            {
                eval('var response = ' + response);

                if ( response.result )
                {
                    alert(response.message);
                }
                else
                {
                    alert(response.message);
                }

                $('share_skin_block').setStyle('display', 'none');
                $('select_skin_block').setStyle('display', 'block');
            }
        });
    },

    delete_skin: function( skin_id )
    {
        var self = this;
        var c_result = confirm(SELanguage.Translate(690702082));

        if ( this.delete_skin_disabled ) { return false; }

        if ( !c_result ) { return false; }

        new Request.JSON({
            method: 'post',
            url: self.request_url,
            data: {    'task': 'delete_skin', 'skin_id': skin_id, 'no_cache': Math.random() },
            onSuccess : function(response)
            {
                if ( response.result )
                {
                    alert(response.message);

                    self.history_skins_carousel.$container.getElementById('delete_skin_'+skin_id)
                        .getParent('.skin_history_item').dispose();
                    self.history_skins_carousel.delete_item();
                }
                else
                {
                    alert(response.message);
                }

                node.disabled = false;
            }
        }).send();
    },

    include_destruct_css: function()
    {
        if ( this.$destruct_css != null )
        {
            this.$destruct_css.setProperty('href', './templates/he_styler_' + this.page + '_destruct.css');
        }
        if ( this.$custom_destruct_css != null )
        {
            this.$custom_destruct_css.setProperty('href', './templates/he_styler_' + this.page + '_custom_destruct.css');
        }
    },

    exclude_destruct_css: function()
    {
        if ( this.$destruct_css != null )
        {
            this.$destruct_css.setProperty('href', this.no_css_src);
        }
        if ( this.$custom_destruct_css != null )
        {
            this.$custom_destruct_css.setProperty('href', this.no_css_src);
        }
    },

    toggle_destruct_css: function( include_css )
    {
        if ( include_css )
        {
            this.include_destruct_css();
        }
        else
        {
            this.exclude_destruct_css();
        }
    }
};

var he_styler_menu =
{
    construct: function()
    {
        this.main_menu_list = [];
        this.main_menu_cont = [];
        this.main_containers = [];
        this.sections_cont = [];
        this.groups_menu = [];
        this.groups_cont = [];
    },

    show_menu: function( id, node )
    {
        if ( this.main_menu_list.length==0 ){
            var $main_menu = $(node).getParent('.main_menu_list');
            this.main_menu_list = $main_menu.getElements('.styler_menu_header');
            this.main_menu_cont = $main_menu.getElements('.styler_menu_body');
            this.main_containers = $$('.styler_main_container');
        }

        this.main_menu_list.removeClass('active');
        this.main_menu_cont.setStyle('display', 'none');
        this.main_containers.setStyle('display', 'none');

        $(node).getParent('.styler_menu_header').addClass('active');
        $(id + '_menu').setStyle('display', 'block');
        $(id + '_body').setStyle('display', 'block');

        if ( id=='select_skin' )
        {
            he_styler.shared_skins_carousel.reload_carousel();
        }
        else if ( id=='skins_history' )
        {
            he_styler.history_skins_carousel.reload_carousel();
        }
        else
        {
            he_styler.clean_styles = true;
        }

        node.blur();
    },

    show_section: function(section_id, group_id, node)
    {
        // section menu
        if ( this.sections_menu==undefined ){
            this.sections_menu = $(node).getParent('.sections_list').getChildren('li');
        }

        this.sections_menu.removeClass('active');
        $(node).getParent('li').addClass('active');

        $(node).blur();

        // section cont
        if ( this.$section_group_menu==undefined ){
            this.$section_group_menu = $$('.section_groups_menu');
        }

        if ( this.sections_cont[section_id]==undefined ){
            this.sections_cont[section_id] = $('section_' + section_id);
        }

        this.$section_group_menu.setStyle('display', 'none');
        this.sections_cont[section_id].setStyle('display', 'block');

        var group_node = this.sections_cont[section_id].getElements('a')[0];

        this.show_group(section_id, group_id, group_node);
    },

    show_group: function(section_id, group_id, node)
    {
        // group menu
        if ( this.groups_menu[section_id]==undefined ){
            this.groups_menu[section_id] = $(node).getParent('.groups_list').getChildren('li');
        }

        this.groups_menu[section_id].removeClass('active');
        $(node).getParent('li').addClass('active');

        $(node).blur();

        // group elements
        if ( this.groups_cont[group_id]==undefined ) {
            this.groups_cont[group_id] = $('styler_group_' + group_id);
        }

        if ( this.$groups_cont==undefined) {
            this.$groups_cont = $$('.styler_elements');
        }

        this.$groups_cont.setStyle('display', 'none');
        this.groups_cont[group_id].setStyle('display', 'block');
    }
};


function he_styler_skins( oprions )
{
    this.type = oprions.type;
    this.$container = oprions.$container;
    this.item_count = oprions.count;
    this.$left_btn = oprions.$left_btn;
    this.$right_btn = oprions.$right_btn;
    this.$loading = oprions.$loading;

    this.construct();

    var self = this;
    
    this.$right_btn.addEvent('click', function(){
        self.load_page('right');
        this.blur();
    });

    this.$left_btn.addEvent('click', function(){
        self.load_page('left');
        this.blur();
    });
}

he_styler_skins.prototype =
{
    construct: function()
    {
        var self = this;

        this.current = 1;
        this.size = 630;
        this.step = 30;
        this.count = Math.ceil(this.item_count/7);
        this.page = 1;
        this.left = 0;
        this.interval = 15;
        this.width = this.size * this.count;

        this.get_count_disabled = false;
        this.load_skin_disabled = false;
        
        this.pages = {1: true};
        this.navigator = {'left': false, 'right': !(this.count<=1), 'reload': true};
        this.check_navigation_btn();

        this.$container.setStyle('width', this.width);
    },

    load_page: function(direction, rollover)
    {
        if ( !this.navigator[direction] ) { return false; }
        if ( !this.pages[this.current] && this.load_skin_disabled ) { return false; }

        this.load_skin_disabled = true;

        var dir = ( direction=='right' ) ? -1 : 1;
        dir = ( direction=='reload' ) ? 0 : dir;

        this.current -= dir;

        this.navigator.left = ( this.current!=1 );
        this.navigator.right = ( this.current!=this.count && this.count>1);
        
        this.check_navigation_btn();

        var self = this;
        var i_count = this.size/this.step;

        if ( this.pages[this.current] )
        {
            var interval = window.setInterval(function(){
                if (i_count==1) {
                    window.clearInterval(interval);
                }
                self.left += dir * self.step;
                self.$container.setStyle('left', self.left);
                i_count--;
            }, this.interval);
        }
        else
        {
            this.$loading.setStyle('display', 'inline');

            new Request.JSON({
                method: 'post',
                url: he_styler.request_url,
                data: {    'task': 'get_skins', 'type': this.type, 'page': this.current, 'no_cache': Math.random() },
                onSuccess : function(response)
                {
                    self.load_skin_disabled = false;

                    self.$loading.setStyle('display', 'none');

                    if ( response.result==0 )
                    {
                        return false;
                    }

                    he_styler.load_skins(self.type, response.skins);

                    self.pages[self.current] = true;

                    var interval = window.setInterval(function()
                    {
                        if (i_count==1)
                        {
                            window.clearInterval(interval);
                        }

                        self.left += dir * self.step;
                        self.$container.setStyle('left', self.left);
                        i_count--;
                    }, self.interval);
                }
            }).send();
        }
    },

    delete_item: function()
    {
        this.item_count--;
        this.count = Math.ceil(this.item_count/7);

        if ( this.count < this.current )
        {
            this.load_page('left');
        }
    },

    reload_carousel: function()
    {
        var self = this;

        if ( this.get_count_disabled )
        {
            return false;
        }

        this.get_count_disabled = true;
        this.$container.empty();

        new Request.JSON({
            method: 'post',
            url: he_styler.request_url,
            data: {    'task': 'get_skin_count', 'type': this.type, 'no_cache': Math.random() },
            onSuccess : function(response)
            {
                self.item_count = response.count;
                self.get_count_disabled = false;
                
                self.construct();
                self.pages[1] = false;
                self.load_page('reload');
            }
        }).send();
    },

    check_navigation_btn: function()
    {
        if ( this.navigator.left ) {
            this.$left_btn.removeClass('disabled');
        }
        else {
            this.$left_btn.addClass('disabled');
        }

        if ( this.navigator.right ) {
            this.$right_btn.removeClass('disabled');
        }
        else {
            this.$right_btn.addClass('disabled');
        }
    }
}