var selectSkin = new Object();

selectSkin = {
    styles: new Array(),
    opened: '',

    //Inicializalas
    init: function() {
        this.applyStyles();
    },


    $: function( id ) {
        return document.getElementById( id );
    },

    //uj stilus hozzaadasa
    addStyle: function(styleClass) {
        this.styles.push( styleClass );
    },


    //stilusok ervenyesitese
    applyStyles: function() {
        for (i = 0; i < this.styles.length; i++) {
            var items = this.findSelects( this.styles[i] );

            for (j = 0; j < items.length; j++) {
                this.prepareSelects( items[j], j );
            }            
        }
    },


    //Az adott stilus selectjeinek lekerese
    findSelects: function( styleClass ) {

           var returnArray = [];
           var els = document.getElementsByTagName( 'select' );
           var pattern = new RegExp('(^|\\s)'+styleClass+'(\\s|$)');
           for (var i = 0; i < els.length; i++) {
              if ( pattern.test(els[i].className) ) {
                 returnArray.push(els[i]);
              }
           }
           return returnArray;
    },

    refreshSelect: function( id ) {
        if ( this.opened == 'selectSkin_' + id + '_Popup' ) {
            var obj = this.$( 'selectSkin_' + id + '_List');
            obj.parentNode.removeChild( obj );

            this.makeDropDownList( this.$(id) );
            return false;
        }

        var obj = this.$( 'selectSkin_' + id);
        obj.parentNode.removeChild( obj );

        var obj = this.$( 'selectSkin_' + id + '_Popup');
        obj.parentNode.removeChild( obj );

        this.prepareSelects( this.$(id), Math.floor(Math.random()*999999) );
    },

    //selectek elokeszitese
    prepareSelects: function( obj, i ) {
        //ID generalasa a selectnek
        if ( (typeof obj.id == 'undefined') || (obj.id == '') )
            obj.id = obj.className.replace(' ', '_') + '_' + i;

        //Select elrejtese
        obj.style.display = 'none';

        //DropDown keszitese
        this.makeDropDownDiv( obj );
        this.makeDropDownList( obj );
    },
    

    //Alap Div elkeszitese
    makeDropDownDiv: function( select ) {
        //Befoglalo keret
        var div = document.createElement( 'div' );
        div.id = 'selectSkin_' + select.id;
        div.style.overflow = 'hidden';
        div.className = select.className + '_Selected';

        //Kivalasztott elemet tároló span
        var titleSpan = document.createElement( 'span' );
        titleSpan.id = div.id+'_TitleSpan';
        titleSpan.onclick = function() { selectSkin.toggleDropDown(this); return false; };
        titleSpan.appendChild( document.createTextNode( select.options[ select.selectedIndex ].text ) );


        //Legordito nyil
        var dropDownArrow = document.createElement('a');
        dropDownArrow.href = '#'
        dropDownArrow.id = div.id+'_DropDownArrow';
        dropDownArrow.onclick = function() { selectSkin.toggleDropDown(this); return false; };
        dropDownArrow.appendChild( document.createTextNode( ' ' ) );

        //Elemek rogzitese
        div.appendChild( titleSpan );
        div.appendChild( dropDownArrow );
        select.parentNode.insertBefore( div, select );
    },
    

    //Legordulo UL letrehozasa
    makeDropDownList: function( select ) {

        if ( this.opened == 'selectSkin_' + select.id + '_Popup' ) {
            var contentDiv = this.$( 'selectSkin_' + select.id + '_Content' );
        } else {
            //Alap popup keret
            var popupDiv = document.createElement( 'div' );
            popupDiv.id = 'selectSkin_' + select.id + '_Popup';
            popupDiv.className = select.className + '_Popup';
            popupDiv.style.display = 'none';
            popupDiv.style.position = 'absolute';
            
            //A lista befoglaloja
            var contentDiv = document.createElement( 'div' );
            contentDiv.style.float = 'left';
            contentDiv.id = 'selectSkin_' + select.id + '_Content';
            contentDiv.className = select.className + '_Content';
        }


        //Lista
        var ul = document.createElement( 'ul' );
        ul.id = 'selectSkin_' + select.id + '_List';
        ul.className = select.className + '_List';

        for (si = 0; si < select.length; si++) {
            var li = document.createElement( 'li' );
            var liLink = document.createElement( 'a' );
            liLink.href = '#';
            liLink.onclick = function() { selectSkin.setSelect(this); return false; }
            liLink.appendChild( document.createTextNode( select[si].text ) );

            var liSpan = document.createElement( 'span' );
            liSpan.appendChild( document.createTextNode( select[si].value ) );

            liLink.appendChild( liSpan );
            li.appendChild( liLink );

            ul.appendChild( li );
        }


        contentDiv.appendChild( ul );

        if ( this.opened !== 'selectSkin_' + select.id + '_Popup' ) {
            popupDiv.appendChild( contentDiv );

            select.parentNode.insertBefore( popupDiv, select );
            
            popupDiv.style.display = 'block';

            popupDiv.style.display = 'none';
        }
    
    },

    //DropDown vezerlese
    toggleDropDown: function( obj ) {
        var box = this.$( obj.parentNode.id + '_Popup' );

        var select = this.$( obj.parentNode.id.replace( /^selectSkin_/, '' ) );

        if ( select.disabled ) {
            return false;
        }


        if ( this.opened == '' || this.opened == box.id ) {
            this.opened = box.id;
        } else {
            this.$( this.opened ).style.display = 'none';
            this.opened = box.id;
        }

        if ( box.style.display !== 'block' ) {
            box.style.display = 'block';
        } else {
            box.style.display = 'none';
            this.scrollPosition = 0;
        }
    },

    setSelect: function( obj ) {
        var selected = obj.childNodes[1].innerHTML;
        var selectedTxt = obj.childNodes[0];
        var select = this.$( obj.parentNode.parentNode.id.replace( /_List$/, '' ).replace( /_Popup$/, '' ).replace( /^selectSkin_/, '' )  );


        //DropDown szövegének lecserélése
        var dropDown = this.$( obj.parentNode.parentNode.id.replace( /_List$/, '' )  );
        dropDown.firstChild.innerHTML = selectedTxt.data;

        //Select értékének beállítása
        for (i = 0; i < select.options.length; i++) {
            if ( select.options[i].value == selected ) {
                select.selectedIndex = i;
                break;
            }
        }

        //onChange meghívása ha van
        if ( typeof select.onchange == 'function' )
            select.onchange();

        //DropDown popup elrejtése
        this.toggleDropDown( dropDown.firstChild );

    },

    handleClicks: function( e ) {
        if ( window.event == null ) {
            var target = e.target;
        } else {
            var target   = window.event.srcElement;
        }


        if ( target.id.indexOf( this.opened.replace( /_List$/, '' ).replace( /_Popup$/, '' ) ) == -1 ) {
            this.$( this.opened ).style.display = 'none';
            this.opened = '';
        }
   }

}

selectSkin.addStyle( 'selectSkin' );
selectSkin.addStyle( 'selectSkin02' );
selectSkin.addStyle( 'selectSkin03' );

//Kattintások regisztrálása, hogy el tünjön a select
wsEvents.register( 'click', function(e) { selectSkin.handleClicks( e ); }, window );
wsEvents.register( 'click', function(e) { selectSkin.handleClicks( e ); }, document );

wsEvents.register( 'load', function() { selectSkin.init(); }, window );