﻿
demo1=function(config){
    this.titleArr=config.title||[];
    this.contentArr=config.content||[];
    this.picurlArr=config.picurl||[];
    this.thumbnailArr=config.thumbnail||[];
    this.linkArr=config.link||[];
    this.container=$(config.renderTo);
    this.width=config.width;
    this.picHeight=this.height=config.height;
    this.tabAlign=config.tabAlign;
    this.picWidth=config.picWidth;
    this.tabWidth=this.width-this.picWidth;
    this.flag=0;
    this.during=config.during||3000;
    this.thumbnailWidth=config.thumbnailWidth||"74";
    this.thumbnailHeight=config.thumbnailHeight||"45";
    this.isTab=config.isTab;
    this.expression=new Object();
    this.interval=new Object();
    this.filterDur=config.filterDur||1;
    this.initComponent();
};

demo1.prototype={
    initComponent:function(){
        this.Con=obj.create({
            tagName:"table",
            params:{
                cellPadding:"0",
                cellSpacing:"0",
                border:"0",
                width:this.width+"px"
            },
            items:[{
                tagName:"tBody",
                items:[{
                    tagName:"tr",
                    items:[{
                        tagName:"td",
                        params:{
                            id:"tabCon",
                            width:this.tabWidth+"px",
                            height:this.height
                        }
                    },{
                        tagName:"td",
                        params:{
                            id:"picCon",
                            width:this.picWidth+"px",
                            vAlign:"bottom",
                            height:this.height,
                            className:"blendTrans_style"
                        },
                        items:[{
                            tagName:"table",
                            params:{
                                cellPadding:"0",
                                cellSpacing:"0",
                                border:"0",
                                width:"100%"
                            },
                            items:[{
                                tagName:"tBody",
                                items:[{
                                    tagName:"tr",
                                    items:[{
                                        tagName:"td",
                                        params:{
                                            id:"conCon",
                                            className:"contentStyle",
                                            innerHTML:this.contentArr[0],
                                            align:"left"
                                        }
                                    }]
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        });
        
        this.tabTab=obj.create({
            tagName:"table",
            params:{
                cellPadding:"0",
                cellSpacing:"0",
                border:"0",
                width:"100%"
            },
            items:[{
                tagName:"tBody"
            }]
        });
        var self=this;
        
        for(var i=0,len=this.titleArr.length;i<len;i++){
            var tr=this.tabTab.insertRow(-1);
            obj.addEvent(tr,"mouseover",function(event){clearInterval(self.interval);self.changePic({e:event});});
            obj.addEvent(tr,"mouseout",function(){self.interval=setInterval(self.expression,self.during);});
            obj.addEvent(tr,"click",function(event){self.jump({e:event});});
            if(this.thumbnailArr.length>0){
                var tdImg=tr.insertCell(-1);
                tdImg.id="tdImg_"+i;
                tdImg.className=i==0?"tabStyle_on":"tabStyle";
                tdImg.appendChild(obj.create({
                    tagName:"img",
                    params:{
                        src:this.thumbnailArr[i],
                        width:this.thumbnailWidth,
                        height:this.thumbnailHeight
                    },
                    listeners:{
                        "mouseover":function(){}
                    }
                }));
            }
            var td=tr.insertCell(-1);
            td.id="td_"+i;
            td.className=i==0?"tabStyle_on":"tabStyle";
            with(td){
                innerHTML=this.titleArr[i];
            }
        }
        
        
        this.container.appendChild(this.Con);   
        if(this.isTab==false){
            $("tabCon").style.display="none";
            $("picCon").width=this.width;
        }
        
        $("picCon").style.backgroundImage="url("+this.picurlArr[0]+")";
        $("picCon").style.cursor="pointer";
        $("picCon").onclick=function(){
            window.open(self.linkArr[0]);
        }
        $("tabCon").appendChild(this.tabTab);
        this.expression=new this.execExpression({scope:this,config:{}});
        if(this.tabAlign=="right"){
            $("tabCon").parentNode.insertBefore($("picCon"),$("tabCon"));
        }
        this.interval=setInterval(this.expression,this.during);
    },
    execExpression:function(config){
        var self=config.scope;
        return (function(){
            self.changePic(config.config);
        })
    },
    changePic:function(config){
        var e=config.e||"";
        var index=0;
        if(e==""){
            index=this.flag%this.titleArr.length+1;
        }else{
            index=this.getIndex(e);
        }
        if(index>=this.titleArr.length)index=0;
        this.flag=index;
        this.recomeCss();

        if($("tdImg_"+index))$("tdImg_"+index).className="tabStyle_on";
        $("td_"+index).className="tabStyle_on";
        if((new GetNavigator()).isIE){
            with($("picCon")){
	            filters.blendTrans.Duration=this.filterDur;
	            filters.blendTrans.apply();
                style.backgroundImage="url("+this.picurlArr[index]+")";
	            filters.blendTrans.play();
	        }
	    }else{
            $("picCon").style.backgroundImage="url("+this.picurlArr[index]+")";
	    }
        var self=this;
        $("picCon").onclick=function(){
            window.open(self.linkArr[index]);
        }
        $("conCon").innerHTML=this.contentArr[index];
    },
    jump:function(config){
        var e=config.e||"";
        var index=this.getIndex(e);
        window.open(this.linkArr[index]);
    },
    getIndex:function(e){
        var index=0;
        var current=null;
        if(e!=""){
            var o=new Kyf.Event(e);
            e=o.e;
            current=o.getObj();
            if(current.tagName.toLowerCase()=="img"){
                current=current.parentNode;
            }
            index=current.id.replace("tdImg_","").replace("td_","");
        }
        return index;
    },
    recomeCss:function(){
        for(var i=0,len=this.tabTab.rows.length;i<len;i++){
            if($("tdImg_"+i))$("tdImg_"+i).className="tabStyle";
            $("td_"+i).className="tabStyle";
        }
    }
}
