////////////////////
//panel无限级树型菜单，数据与呈现分离
//Created By : Yozo Chen
////////////////////


var NavMenuBar = new Class({
	options: {
        dataSource:[],
        dataType:'json',
        xmlUrl:'ElectronicCategory.xml',
        containerId:'MenuBarContainer',
        id:'NavMenuBar',
        skinUrl:'/Images/NavMenuBar/set1/'
	},

	initialize: function(options) {
		this.setOptions(options);
        this._renderBar();
	},
	bindData: function(ds){
	    this.options.dataSource = ds;
	    this._renderBar();
	},
	_renderBar: function(){
	    var eMenuBarContainer = $(this.options.containerId);
        eMenuBarContainer.setHTML('');
	    for(var i = 0; i < this.options.dataSource.length; i++){
	        var itemLength =(this.options.dataSource[i].items.length);
            var eNavMenuBar = new Element('div', {'id':this.options.id, 'class':'NavMenuBar' })
                .injectInside(eMenuBarContainer);
		    var eBox = new Element('div', {'class':'Box' })
                .injectInside(eNavMenuBar);
		    var eSpace = new Element('div', {'class':'Space' })
                .injectAfter(eBox);
            
		    var eTitle = new Element('div', {'class':'Title','id':'ImgToggle_'+i.toString() })
		        .setStyle('cursor','pointer')		        
                .injectInside(eBox);
		    
		    if (itemLength>0)
            {
		        var eContent = new Element('div', {'class':'Content','id':'BoxContent_'+i.toString() })
                    .injectAfter(eTitle);
                this._renderTree(i,eContent);
            }
            else    //如果无子节点，则不显示内容区
            {
                var eContent = new Element('div', {'class':'Contentxx','id':'BoxContent_'+i.toString() })
                    .injectAfter(eTitle);
                this._renderTree(i,eContent);
            }
		    
            
            if (itemLength>0)
            {
		        var eFooter = new Element('div', {'class':'Footer' })
                    .injectAfter(eContent);
            }
            else    //如果无子节点，则不显示底部
            {
                var eFooter = new Element('div', {'class':'Footerxx' })
                    .injectAfter(eContent);
            }
            
            var str = this.options.dataSource[i].aHref ? '<a href="'+this.options.dataSource[i].aHref+'">'+this.options.dataSource[i].title+'</a>' : this.options.dataSource[i].title;
            var eTitleTxt = new Element('span', {'class':'Txt','id':'TitleTxt__'+i.toString() })
                .setHTML(str)
                .injectInside(eTitle);
            
            
   
                
            var s = 'var eBoxContent = $(\'BoxContent_'+i.toString()+'\'); var eImg = $(\'ImgToggle_'+i.toString()+'\');'+
                'if(this.wrapper.offsetHeight == 0) eImg.src = \''+this.options.skinUrl+'Box_Button_up.gif\'; else eImg.src = \''+this.options.skinUrl+'Box_Button_down.gif\';'
                
                  
            eval('var mySlide_'+i.toString()+' = new Fx.Slide(\'BoxContent_'+i.toString()+'\',{onComplete: function() {}});');
//            eval('var mySlide_'+i.toString()+' = new Fx.Slide(\'BoxContent_'+i.toString()+'\',{onComplete: function() {'+s+'}});');
//            var eImgToggle = new Element('img', {'class':'ImgToggle','id':'ImgToggle_'+i.toString(),'src':this.options.skinUrl+'Box_Button_down.gif' })
//                .injectAfter(eTitleTxt).addEvent('click', function(e){
//	                e = new Event(e);
//	                var sId = e.target.id
//	                var sNo = sId.substr(10,sId.length);
//	                eval('mySlide_'+sNo+'.toggle();');
//	                e.stop();
//                });
            
            eTitle.addEvent('click', function(e){
	                e = new Event(e);
	                if (e.target.tagName.toLowerCase() == "a") return;
	                var sId = e.target.id	                
	                var sNo = sId.substr(10,sId.length);
	                
	                eval('mySlide_'+sNo+'.toggle();');
	                e.stop();
                });
        }
	},
	_renderTree: function(i,eContent) {
        var eUl = new Element('ul', {'class':'OutUl' }).injectInside(eContent);
        for(var j = 0; j < this.options.dataSource[i].items.length; j++){       
            var eLi = new Element('li')
                .setHTML('<a href="'+this.options.dataSource[i].items[j].href+'">'+this.options.dataSource[i].items[j].name+'</a>')
                .injectInside(eUl);
            if(this.options.dataSource[i].items[j].items && this.options.dataSource[i].items[j].items.length > 0){
                //eLi.setStyle('background','url(/Images/NavMenuBar/icon_add.gif) no-repeat');
                this._getClassData(this.options.dataSource[i].items[j],eLi);
            }
        }
    
	},
	_getClassData: function(item,ePrevious){
        var eUl = new Element('ul', {'class':'InUl' }).injectAfter(ePrevious);
        for(var i = 0; i < item.items.length; i++){
            var eLi = new Element('li')
                .setHTML('<span class="childSpace"></span><a href="'+item.items[i].href+'">'+item.items[i].name+'</a>')
                .injectInside(eUl);
            if(item.items[i].items && item.items[i].items.length > 0){
                this._getClassData(item.items[i],eLi);
            }
        }
        
	}
});
NavMenuBar.implement(new Events, new Options);

//使用范例
//var ds = [
//    {title:'标题1',items:[
//        {name:'列表1-1',href:'#',items:[
//            {name:'列表1-1-1',href:'#'},
//            {name:'列表1-1-2',href:'#'},
//            {name:'列表1-1-3',href:'#'}
//        ]},
//        {name:'列表1-2',href:'#'},
//        {name:'列表1-3',href:'#'}
//    ]},
//    {title:'标题2',items:[
//        {name:'列表2-1',href:'#'},
//        {name:'列表2-2',href:'#'},
//        {name:'列表2-3',href:'#'}
//    ]},
//    {title:'标题3',items:[
//        {name:'列表3-1',href:'#'},
//        {name:'列表3-2',href:'#'},
//        {name:'列表3-3',href:'#'}
//    ]}
//];

////可以在创建对象时传入数据源，也可以用bindData()方法绑定数据
//var mb = new NavMenuBar({
//        //dataSource:ds,
//        dataType:'json',
//        xmlUrl:'ElectronicCategory.xml',
//        containerId:'MenuBarContainer',
//        id:'NavMenuBar'
//	});
//mb.bindData(ds);
//</script>