(function($){

    var $document = $(document);

    $document.off('initDropdowns');
    $document.on('initDropdowns', function(_, callback){
        var $dropdowns = $('.sys_font_controller_item.dropdown_customize');

        var template = $.templateEngine.init('dropdown');
        $.each($dropdowns, function(_, item){
            var $item = $(item);

            var $dropdown = $('<div>' + template.applyTemplate('container') + '</div>');
            var $dropdown_body = $dropdown.find('.ss_dropdown');

            $dropdown_body.attr('for_id', $item.attr('id'));

            var $title_element = $('<div>' + template.applyTemplate('title_item') + '</div>');
            var $options = $('<div>' + template.applyTemplate('items') + '</div>');
            var $options_body = $options.find('div');

            $.each($item.find('option'), function(_, option){
                var $option = $(option);

                var $option_element = $('<div>' + template.applyTemplate('item') + '</div>');
                var $option_element_body = $option_element.find('div');

                $option_element_body.append($option.html());
                $option_element_body.attr('value', $option.attr('value'));

                if ($option.attr('selected')=="selected") {
                    $title_element.find('div').html($option.html());
                    $option_element_body.addClass('selected');
                }

                $options_body.append($option_element.html());
            });

            $dropdown_body.append($title_element.html());
            $dropdown_body.append($options.html());


            $item.after($dropdown.html());
        });

        if(callback) {
            callback();
        }

        $document.trigger('initDropdownsControllers');
    });

    $document.off('initDropdownsControllers');
    $document.on('initDropdownsControllers',function(){
        var $dropdowns = $('.ss_dropdown');

        // Title hover reactions
        $document.off('mouseover', '.ss_dropdown');
        $document.on('mouseover', '.ss_dropdown', function() {
            $(this).children('.ss_dropdown_items').show();
        });
        $document.off('mouseout', '.ss_dropdown');
        $document.on('mouseout', '.ss_dropdown', function() {
            $(this).children('.ss_dropdown_items').hide();
        });

        // Click action
        $document.off('click', '.ss_dropdown .ss_dropdown_item');
        $document.on('click', '.ss_dropdown .ss_dropdown_item', function() {
            var $this = $(this);
            var $current_dropdown = $this.parents('.ss_dropdown');
            var $current_list = $current_dropdown.find('.ss_dropdown_items');

            $current_list.find('.ss_dropdown_item').removeClass('selected');
            $this.addClass('selected');

            $current_dropdown.find('.ss_dropdown_title').html($this.html());

            var $current_select = $('#' + $current_dropdown.attr('for_id'));
            $current_select.val($this.attr('value'));

            $document.trigger('b.full.txt.upd');
        });

    });

    //Dropdown Customize

    $document.off('updateDropdown');
    $document.on('updateDropdown',function(_, selector, select_value) {
        var $this = $(selector);
        var $dropdown = $('div.ss_dropdown[for_id="' + $this.attr('id') + '"]');
        $dropdown.find('.ss_dropdown_title').html($this.find('option[value="' + $this.val() + '"]').html());
        $dropdown.find('.ss_dropdown_item').removeClass('selected');
        $dropdown.find('.ss_dropdown_item[value="' + $this.val() + '"]').addClass('selected');
    });

})(SWjQuery);