var selectZIndex = 200;
var changedAfterClear = false;



/* executed on .select-header */
var showOrHideSelectList = function () {
    var wrapper = $(this).closest(".select-wrapper");
    var list_wrapper = wrapper.find(".select-list-display-wrapper");
    var list_header = list_wrapper.prev(".select-header");
    var list = wrapper.find(".select-list");
    if (list.is(":visible")) {
        list_wrapper.removeClass("expanded");
        wrapper.trigger("list-hidden");
    } else {
        if (!($(this).closest(".select-list-display-wrapper").hasClass("disabled"))) {
            list_wrapper.addClass("expanded");
            wrapper.trigger("list-expanded");
        }
    }
}



/* li clicked */
var changeSelectedOption = function () {
    var selectWrapper = $(this).closest(".select-wrapper");
    if (! ($(this).hasClass('selected') || $(this).hasClass('disabled'))) {
        selectWrapper.find("li").removeClass("selected");
        $(this).addClass("selected");
        selectWrapper.find(".select-header .label").html($(this).html());
        var optionValue = $(this).attr("optionValue");
        selectWrapper.find("select option[value='" + optionValue + "']").attr('selected', 'selected');
        
        
        selectWrapper.trigger("select-changed");
        selectWrapper.trigger("form-changed");
    }
    selectWrapper.find(".select-list-display-wrapper").removeClass("expanded");
    selectWrapper.trigger("list-hidden");
}

/* check checkbox state on click, executed on  .checkbox-wrapper */
var changeCheckboxState = function () {
    imgCheckBox = $(this).find(".checkbox");
    inputCheckBox = $(this).find("input:checkbox");
    
    checked = inputCheckBox.attr("checked");
    if (! checked || checked == "false") {
        checked = false;
    } else {
        checked = true;
    }
    
    if (! checked) {
    	//clear other checkbox-es
        //$(this).parent().find('.checkbox').removeClass('checkbox-checked');
        //$(this).parent().find('input:checkbox').removeAttr('checked');
        //mark this checkbox
        imgCheckBox.addClass("checkbox-checked");
        inputCheckBox.attr("checked", "checked");
    } else {
        imgCheckBox.removeClass("checkbox-checked");
        inputCheckBox.removeAttr("checked");
    }
    
    $(this).trigger("checkbox-changed");
    $(this).trigger("form-changed");
}

/* uncheck all option, executed on .select-wrapper*/
var clearSelect = function () {
    
    var firstOption = $(this).find("select option:first");
    if (firstOption.is(":selected")) {
        return;
    }
    changedAfterClear = true;
    
    $(this).find("li").removeClass("selected");
    firstOption.attr('selected', 'selected');
    $(this).find(".select-header .label").html(firstOption.text());
    
    // $(this).trigger("form-changed");
    // TODO: triger only on change
}

var clearCheckbox = function () {
    if ($(this).find("input:checkbox:checked").length === 0) {
        return;
    }
    
    changedAfterClear = true;
    
    $(this).find(".checkbox").removeClass("checkbox-checked");
    $(this).find("input:checkbox").removeAttr("checked");
    
    // $(this).trigger("form-changed");
    // TODO: triger only on change
}

var setSelectState = function (wrapper) {
    var selectedOption = wrapper.find("option:selected");
    
    /* select li */
    wrapper.find("li").removeClass("selected");
    var liToSelect = wrapper.find("li[optionValue='" + selectedOption.val() + "']");
    liToSelect.addClass("selected");
    
    /* set label */
    wrapper.find(".select-header .label").html(selectedOption.text());
}

/* set checkboxes state, executed on  .checkbox-wrapper */
var setCheckboxState = function (wrapper) {
    
    imgCheckBox = wrapper.find(".checkbox");
    inputCheckBox = wrapper.find("input:checkbox");
    
    checked = inputCheckBox.attr("checked");
    if (! checked || checked == "false") {
        checked = false;
    } else {
        checked = true;
    }
    
    if (checked) {
        imgCheckBox.addClass("checkbox-checked");
    } else {
        imgCheckBox.removeClass("checkbox-checked");
    }
}

/* executed on html select, build select-wrapper html and sets everything */
var buildSelect = function () {
    var select = $(this);
    
    //hide select if it contains no data
    if (select.find("option").length<=1){
    	select.hide();
    	return;
    }
    
    if (select.attr('multiple')) {
        return;
    }
    
    var wrapper = select.wrap("<div class='select-wrapper' />").parent();
    wrapper.addClass(select.attr("class"));
    wrapper.css("z-index", selectZIndex);
    selectZIndex--;
    wrapper.prepend("<div class='select-header'><span class='dropdown-arrow'></span><div class='label'></div></div><div class='select-list-display-wrapper'><ul class='select-list' ></ul></div>");
    var ul = $('ul', wrapper);
    $('option', this).each(function (i) {
        if (i > 0) {
            var li = $("<li optionValue=" + $(this).attr('value') + ">" + $(this).text() + "</li>");
            if ($(this).is(':disabled')) {
                li.addClass('disabled');
            }
            ul.append(li);
        }
    });
    
    setSelectState(wrapper);
    
    /* set width */
    //var wrapperWidth = wrapper.width();
    
    var wrapperWidth = select.width() + 4;
    
    wrapper.width(wrapperWidth);
    
    var arrowWidth = wrapper.find(".select-header .dropdown-arrow").width();
    //var list = wrapper.find(".select-list");
    //var listWidth = list.width();
    var label = wrapper.find(".select-header .label");
    var headerWidth = wrapperWidth - 6;
    wrapper.find(".select-header").width(headerWidth);
    
    label.width(headerWidth - arrowWidth - 3);

    
    var listWrapper = wrapper.find(".select-list-display-wrapper");
    
    listWrapper.attr("originalWidth", listWrapper.width());
    if (listWrapper.width() < headerWidth-2) {
        listWrapper.width(headerWidth-2);
    }
    
    
    /* set handlers */
    wrapper.find(".select-header").click(showOrHideSelectList);
    ul.find("li").click(changeSelectedOption);
}

/* executed on .checkbox-wrapper, html is build actually, but needs to set state and event handlers */
var buildCheckbox = function () {
    /* set checkboxes state */
    setCheckboxState($(this));
    
    /* change checkbox state on click */
    $(this).click(changeCheckboxState);
}


$(document).ready(function () {
    
    
    $.fn.clearForm = function () {
        
        changedAfterClear = false;
        
        /* selects */
        $(this).find(".select-wrapper").each(clearSelect);
        
        /* checkboxes */
        $(this).find(".checkbox-wrapper").each(clearCheckbox);
        
        if (changedAfterClear) {
            $(this).trigger("form-changed");
        }
        //alert(changedAfterClear);
    }
    
    $.fn.buildForm = function () {
        
        selectZIndex = 200;
        
        $(this).find("select").each(buildSelect);
        
        $(this).find(".checkbox-wrapper").each(buildCheckbox);
    }
    
    
    $(document).mousedown(function (event) {
        
        if ($(event.target).closest(".select-wrapper").length === 0) {
            $(".select-wrapper .select-list-display-wrapper.expanded").each(function () {
                $(this).removeClass("expanded");
                $(this).closest(".select-wrapper").trigger("list-hidden");
            });
        } else {
            thisList = $(event.target).closest(".select-wrapper").find(".select-list-display-wrapper").get(0);
            $(".select-wrapper .select-list-display-wrapper.expanded").each(function () {
                if (!($(this).get(0) == thisList)) {
                    $(this).removeClass("expanded");
                    $(this).closest(".select-wrapper").trigger("list-hidden");
                }
            })
        }
        // TODO:
    })
    
    /* checkbox */
    /*
    to be manually created
    <xyz class="checkbox-wrapper"><span class="checkbox"></span><input type="checkbox" name="blah"/>foo bar</xyz>
    */
});