/**
 * Magento Enterprise Edition
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Magento Enterprise Edition License
 * that is bundled with this package in the file LICENSE_EE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.magentocommerce.com/license/enterprise-edition
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     enterprise_connect
 * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://www.magentocommerce.com/license/enterprise-edition
 */

/*Добавить обработчики когда элементы меняются после загрузки страницы, проставить точки с запятой в конце строк, при клике на .select если options показан прятать, если снизу мало места для открытия options открывать вверх*/
var Niceforms = {
    forms: [],
    selects: [],
    checkboxes: [],
    radios: [],
    inputs: [],
    textareas: [],
    formClassName: 'nice-form',
    selectClassName: 'nice-select',
    checkboxClassName: 'nice-checkbox',
    radioClassName: 'nice-radio',
    inputClassName: 'nice-input',
    textareaClassName: 'nice-textarea',
    form: null,

    init: function(config) {
        var __this = this;
        
        this.selectClassName = typeof( config ) != 'undefined' && config.selectClassName ? config.selectClassName : this.selectClassName;
        this.checkboxClassName = typeof( config ) != 'undefined' && config.checkboxClassName ? config.checkboxClassName : this.checkboxClassName;
        this.radioClassName = typeof( config ) != 'undefined' && config.radioClassName ? config.radioClassName : this.radioClassName;
        this.inputClassName = typeof( config ) != 'undefined' && config.inputClassName ? config.inputClassName : this.inputClassName;
        this.textareaClassName = typeof( config ) != 'undefined' && config.textareaClassName ? config.textareaClassName : this.textareaClassName;
        this.formClassName = typeof( config ) != 'undefined' && config.formClassName ? config.formClassName : this.formClassName;
        this.form = typeof( config ) != 'undefined' && config.form ? config.form : null;

        if (this.form == null) {
            this.forms = $$('.'+this.formClassName);
            for (var formLen = this.forms.length, i = 0; i < formLen; i++) {
                if (!this.forms[i].hasClassName('styled')) {
                    this.drawElems(this.forms[i]);
                }
            }
        } else {
            if (!this.form.hasClassName('styled')) {
                this.drawElems(this.form);
            }
        }
    },

    drawElems: function(form) {
        var elems = form.select('select'),
            labels = form.select('label');

        for (var len = elems.length, k = 0; k < len; k++) {
            this.selects.push(elems[k]);
            this.drawSelect(elems[k]);
        }

        elems = form.select('input[type=checkbox]');
        for (var len = elems.length, k = 0; k < len; k++) {
            this.checkboxes.push(elems[k]);
            this.drawCheckboxes(elems[k]);
        }

        elems = form.select('input[type=radio]');
        for (var len = elems.length, k = 0; k < len; k++) {
            this.radios.push(elems[k]);
            this.drawRadio(elems[k]);
        }

        elems = form.select('input[type=text]');
        for (var len = elems.length, k = 0; k < len; k++) {
            this.inputs.push(elems[k]);
            this.drawInput(elems[k]);
        }

        elems = form.select('textarea');
        for (var len = elems.length, k = 0; k < len; k++) {
            this.textareas.push(elems[k]);
            this.drawTextarea(elems[k]);
        }
        form.addClassName('styled');

        labels.each(function(e) {
            e.observe('click', function(event) {
                if ($(this).htmlFor){
                    var inp = $(this.htmlFor);

                    if (inp.getAttribute('type') == 'checkbox' && inp.up().hasClassName('checked') && !inp.disabled) {
                        inp.up().removeClassName('checked');
                        inp.checked = true;
                    } else if (inp.getAttribute('type') == 'checkbox' && !inp.disabled) {
                        inp.up().addClassName('checked');
                        inp.checked = false;
                    }
                }
            });
        });
    },

    drawRadio: function(elem){
        var __this = this,
            wrapEl = new Element('span'),
            old = Element.Methods.ByTag.SELECT.setValue;

        wrapEl.className = this.radioClassName + ' ' + elem.className;
        elem.wrap(wrapEl);

        this.makeDisabled(wrapEl, elem);

        wrapEl[elem.checked ? 'addClassName' : 'removeClassName']('checked');

        // replace Prototype's elements method setValue() by custom
        var setValue = function(element) {
            // set element value
            old(this, element);

            wrapEl[elem.checked ? 'addClassName' : 'removeClassName']('checked');
        };

        elem.setValue = setValue;

        wrapEl.observe('click', function(event) {
            if (document.createEvent) {
                var evObj = document.createEvent('Events');

                evObj.initEvent('change', true, false);
                elem.dispatchEvent(evObj);
            } else if (document.createEventObject) {
                elem.fireEvent('onchange');
            }

            $$('.' + __this.radioClassName).each(function(i) {
                if (elem.name == i.down().name && elem.disabled != true) {
                    i.removeClassName('checked');
                }
            });

            if (elem.checked && !elem.disabled) {
                this.addClassName('checked');
            }
        });

        elem.observe('change', function(event) {
            if (!elem.disabled) {
                this.checked = true;
            }
        })
    },

    drawCheckboxes: function(elem) {
        var wrapEl = new Element('span'),
            old = Element.Methods.ByTag.SELECT.setValue;

        wrapEl.className = this.checkboxClassName + ' ' + elem.className;
        elem.wrap(wrapEl);

        this.makeDisabled(wrapEl, elem);

        wrapEl[elem.checked ? 'addClassName' : 'removeClassName']('checked');

        // replace Prototype's elements method setValue() by custom
        var setValue = function(element, value) {
            // set element value
            old(this, element);
            wrapEl[elem.checked ? 'addClassName' : 'removeClassName']('checked');
        };

        elem.setValue = setValue;

        wrapEl.observe('click', function(event) {
            if (wrapEl == event.target && !elem.disabled) {
                // Click on checkbox and call its 'click' observers
                if (this.hasClassName('checked')) {
                    this.removeClassName('checked');
                    elem.checked = false;
                } else {
                    this.addClassName('checked');
                    elem.checked = true;
                }
                if (document.createEvent) {
                    var evObj = document.createEvent('Events');

                    evObj.initEvent('click', true, false);
                    elem.dispatchEvent(evObj);
                } else if (document.createEventObject) {
                    elem.fireEvent('onclick');
                }
            }
        });
    },

    drawSelect: function(elem) {
        var wrapEl, __this = this,
            old = Element.Methods.ByTag.SELECT.setValue;

        //generating nice-select html 
        wrapEl = new Element('div');

        wrapEl.className = this.selectClassName + ' ' + elem.className;
        elem.wrap(wrapEl);

        // replace Prototype's elements method setValue() by custom
        var setValue = function(element) {
            // set element value
            old(this, element);
            // set styled dropdown value
            __this.generateSelect(elem, wrapEl, 'update');
        };

        elem.setValue = setValue;

        this.generateSelect(elem, wrapEl).observe('change', function(event) {
            __this.generateSelect(this, wrapEl, 'update');
        });

        this.makeDisabled(wrapEl, elem);

        //close dropdown when click outside it
        $(document).observe('click', function(event) {
            var elem = Event.findElement(event, 'div.nice-select');

            if (elem != wrapEl) {
                wrapEl.removeClassName('active');
            }
        })

    },

    generateSelect: function(elem, wrapEl, type) {
        var selectedOption, preText, optHtml, optlist,
            __this = this,
            disable = false;

        // make orig. disabled select active to get it's content
        // it will be disable again at the end of this method
        this.makeDisabled(wrapEl, elem);

        if (elem.disabled) {
            disable = true;
            elem.disabled = false;
        }

        //generating nice-select html
        optlist = elem.select('option');

        selectedOption = optlist[elem.selectedIndex];
        preText = elem.hasClassName('pretext') && elem.readAttribute('title') ? '<strong>'+elem.readAttribute('title')+' </strong>' : preText = '';
        optHtml = '<div class="options"><ul>';
        
        for (var optLenght = optlist.length, curOpt = 0; curOpt < optLenght; curOpt++) {
            var selected = '';

            if (curOpt == elem.selectedIndex) {
                selected = ' class="selected"';
            }
            optHtml += '<li'+ selected +' value="'+curOpt+'"><span title="'+ optlist[curOpt].innerHTML + '">' + preText + '' + optlist[curOpt].innerHTML + ' </span></li>';
        }
        optHtml += '</ul><div class="top-corners"><span></span></div><div class="bot-corners"><span></span></div></div>';
        selHtml = '<div class="select"><div><span title="'+ selectedOption.innerHTML  +'">' + preText + '' + selectedOption.innerHTML + '</span></div></div>' + optHtml;
        
        if (type == 'update') {
            wrapEl.down('div.options').remove();
            wrapEl.down('div.select').remove();
            wrapEl.insert({ bottom: selHtml });
        } else {
            wrapEl.insert({ bottom: selHtml });
        }

        wrapEl.down('div.select').observe('click', function(event){
            if (!elem.disabled) {
                __this.showOptions(this);
            }
        });

        //add observes for options
        for (var opt = wrapEl.select('li'), optionLength = opt.length, curOption = 0; curOption < optionLength; curOption++) {
            opt[curOption].observe('click', function(event) {
                for(var r = 0; r < optionLength; r++) {
                    opt[r].removeClassName('selected');
                }
                this.addClassName('selected');
                this.up(2).removeClassName('active');
                this.up(2).select('div.select div')[0].update(this.innerHTML);

                var elem = this.up(2).select('select')[0];
                elem.options[this.value].selected = true;

                if (document.createEvent) {
                    var evObj = document.createEvent('Events');

                    evObj.initEvent('change', true, false);
                    elem.dispatchEvent(evObj);
                } else if (document.createEventObject) {
                    elem.fireEvent('onchange');
                }
            });
        }
        if (disable) {
            disable = false;
            elem.disabled = true;
        }
        return elem;
    },

    showOptions: function(elem) {
        for (var selects = $$('.' + this.selectClassName), len = selects.length, i = 0; i < len; i++) {
            selects[i].removeClassName('active');
        }
        elem.up().addClassName('active');
    },

    makeDisabled: function(wrap, elem) {
        wrap[elem.disabled ? 'addClassName' : 'removeClassName']('disabled');
    },

    drawInput: function(elem) {
        var wrapEl = new Element('div');

        wrapEl.className = this.inputClassName + ' ' + elem.className;
        Element.wrap(elem, wrapEl);
        this.makeDisabled(wrapEl, elem);
    }, 
    
    drawTextarea: function(elem) {
        var wrapEl = new Element('div');
        
        wrapEl.className = this.textareaClassName + ' ' + elem.className;
        Element.wrap(elem, wrapEl);
        this.makeDisabled(wrapEl, elem);
    }
};
/*init in footer.phtml*/