var GenreNavi = function( conId ){
    this.prevSelectedObj = null;
    this.naviObj = UI.$(conId);
    this.naviSubObj = null;
    this.navTree = null;
    this.init();
    this.index = null;
};


GenreNavi.prototype = {
    init : function(){
        if( this.naviObj == null ){
            alert("초기화 할 수 없습니다");
        }
        this.naviSubObj = $C("div");
        this.naviSubObj.className = "subNavLst";
        this.naviSubObj.id = "subNavLst";
        this.naviObj.parentNode.appendChild( this.naviSubObj );  
        UI.addEvent(document, 'mousedown', this.displaySubNavi.bind(this) );           
    },
    getGenreText : function( objTree, selectedCode ){
        for( var num in objTree ){
            if( objTree[num].code == selectedCode ){
                return objTree[num].text;
            }
        }
        return "";
    },
    setGenreNavi : function(){
        this.naviObj.innerHTML = "";
        var depthCnt = 0;
        for( var property in this.navTree ){depthCnt++;}
        for( var i=0;i<depthCnt;i++){
            var item = this.navTree["depth"+(i+1)];
            // subTree가 있을때만 표현
            if( item.subTree.length > 0 ){
	            var a = $C("a");a.href="javascript:;";a.className=(i==(depthCnt-1))? "navDrop b" : "navDrop";
	            a.appendChild(document.createTextNode(this.getGenreText( item.subTree, item.code )));
	            UI.addEvent( a, "click", this.setSubGenreNavi.bind(this, a, i+1 ) );
	            if( i > 0 ){
	                var span = $C("span");span.className = "gt";
	                var img = $C("img");img.src="http://img-contents.daum-img.net/music/2008_home/common/arrow_pos01.gif";img.alt="";
	                span.appendChild(img);
	                this.naviObj.appendChild( span );
	            }
	            this.naviObj.appendChild( a );
            }
        }
    },
    setSubGenreNavi : function( anchor, depth ){
        if( this.prevSelectedObj == anchor && this.naviSubObj.style.display == "block" ){
            this.naviSubObj.style.display = "none";
            return false;            
        }
        if( this.prevSelectedObj ){
            this.prevSelectedObj.className = this.prevSelectedObj.className.replace(" selected","");
        }       
       // anchor.blur();
        this.naviSubObj.style.left = (anchor.offsetLeft-4)+"px";
        this.naviSubObj.style.display = "block";
        this.naviSubObj.innerHTML = "";     
        var ul = $C("ul");
        var dataset = this.navTree["depth"+depth];
        for ( var i=0,j=dataset.subTree.length; i<j; i++ ){
            var item = dataset.subTree[i];
            if( item.code != "" ){
	            var a = $C("a"); a.href = item.url;
	            a.appendChild(document.createTextNode(item.text)); 
	            if( dataset.code == item.code )a.className += " selected";
	            var li = $C("li");li.appendChild(a);ul.appendChild(li);
	            li = null;a = null;
            }
        }
        this.naviSubObj.appendChild( ul );

        //this.naviSubObj.style.width = "auto";
        anchor.className += " selected";
        if( anchor.offsetWidth > this.naviSubObj.offsetWidth ){
            //this.naviSubObj.style.width = ( anchor.offsetWidth + 14 ) + "px";
        }
        this.prevSelectedObj  = anchor;
    },
    displaySubNavi : function( event ) {
    	if( UI.$('subNavLst').style.display == "block" ){
	    	var el = UI.getEl( event );
	   		var div = UI.findParent( el, "DIV", "subNavLst");
	   		if( !div ){
	        	UI.$('subNavLst').style.display = "none";    	
	        }	    
    	}
    },
    setTree : function( object ){
        this.navTree = object;
    },
    render : function(){
        this.setGenreNavi();
    }
};

var setUrlByGenreId = function( nowGenreObj ){
    if( nowGenreObj ){
        var ary = nowGenreObj.split("_");
        location.href = "/genre/genre.do?styleKind=genre&genreCode="+ary[1]; // id example >> genre_KO01
    }
};