/*
 * jQuery dsCheckBox plug-in
 *
 * Copyright (c) 2010 DATASUN s.r.o.
 * Web: http://www.datasun.sk
 * Author: L. Halabuk
 * Contact: lubos.halabuk@datasun.sk
 * Version: 1.0
 */

(function($) {

    $.fn.dsSelectBox = function(o) {
        if (this.length == 1 && this.data('dsSelectBox') != null) {
            return this.data('dsSelectBox');
        }

        var opt = $.extend({}, $.fn.dsSelectBox.defaults, o);
        this.each(function() {
            var $this = $(this);            
            if (this.tagName.toLowerCase() == 'select') {
                if ($this.data('dsSelectBox') == null) {
                    var validator = new SelectBox(this, opt);
                    $this.data('dsSelectBox', validator);
                }
            }
        });
        
        return this;
    };

    $.fn.dsSelectBox.defaults = {
        className: 'jquery-selectbox',        
        animationSpeed: 'normal',
        listboxMaxSize: 10,
        minListHeight: 80
    };

    var SelectBoxInstances = new Array();
    
    var SelectBox = function(obj, opt) {

        this.showList = function() {
            if ($obj.attr('disabled') == true) {
                return;
            }

            for (var i = 0; i < SelectBoxInstances.length; i++) {
                if (SelectBoxInstances[i] != this) {
                    SelectBoxInstances[i].hideList();
                }
            }

            var listWidth = $list.width();
            var overflow = $list.css('overflow');

            $list.css({'height': '0px', 'width': '0px', 'overflow': 'hidden' /*IE6 fix*/});
            $list.show();

            var $items = $list.find('.' + opt.className + '-item');
            var listHeight = $items.outerHeight() * ($items.length > opt.listboxMaxSize ? opt.listboxMaxSize : $items.length);           

            $list
                .hide()
                .css({
                    'height': listHeight + 'px',
                    'width': listWidth + 'px',
                    'overflow': overflow
                }).slideDown();
                
            listVisible = true;
        }

        this.hideList = function() {
            $list.slideUp();
            listVisible = false;
        }

        // init
        SelectBoxInstances.push(this);

        var $obj = $(obj);
        $obj.hide();

        var replacement = $(
            '<div class="' + opt.className + '">' +
                '<div class="' + opt.className + '-current"></div>' +
                '<div class="' + opt.className + '-more"></div>' +
                '<div class="' + opt.className + '-list"></div>' +
            '</div>'
        );

        var self = this;
        var listVisible = false;

        var $currentItem = replacement.find('.' + opt.className + '-current');
        var $list = replacement.find('.' + opt.className + '-list').hide();
        var $moreButton = replacement.find('.' + opt.className + '-more');

        $obj.find('option').each(function(k,v) {
            // TODO: dorobit renderovanie vnutra elementu na zaklade roznych podmienok
            var $option = $(v);
            var listElement =  $('<span class="' + opt.className + '-item">' + $option.text() + '</span>');

            listElement
                .data('value', $option.val())
                .click(function() {
                    var option = $(this);
                    var value = option.data('value');
                    
                    $currentItem.text( option.text() );
                    $obj
                        .val(value)
                        .triggerHandler('change');

                    self.hideList();
            }).mouseover(function() {
                $(this).addClass(opt.className + '-item-hover');
            }).mouseout(function() {
                $(this).removeClass(opt.className + '-item-hover');
            });
            
            $list.append(listElement);
        });
        
        $obj.after(replacement);
        $currentItem.text( $obj.find('option:selected').text() );

        $moreButton.click(function() {
            if (listVisible) {
                self.hideList();
            } else {
                self.showList();
            }
        });       
    }

})(jQuery);