var bannerShow = Class.create();
bannerShow.prototype = {
    initialize:function(id,option){
        this.id = id;
        this.option = Object.extend({event:"click",dur:0.6,interval:5,hasNav:false,type:0}, option || {});
        this.event = this.option.event;//����¼�
        this.dur = this.option.dur; //�����仯ʱ��
        this.type = this.option.type; //�����仯����
        this.interval = this.option.interval;//���ʱ��
        this.hasNav = this.option.hasNav;//�Ƿ���Сͼ����
        this.intervarID;
        this.isShowNum = 0;//��ǰ��ʾͼƬ
        this.obj = $(id);
        this.nav = this.hasNav ? this.obj.down() : this.obj.insert({top:new Element("ul",{'class':"bannerNav"})}).down();//����
        this.main = this.nav.next();//banner
        this.imgAllNum = this.main.childElements().length;
        this.bannerDims = this.main.getDimensions();//banner�ߴ�
        this.init();
    },

    init:function() {
        this.render();
        this.start();
        this.obj.observe('mouseover',this.stop.bind(this));
        this.obj.observe('mouseout',this.start.bind(this));
        this.nav.observe('mouseover',this.imgOver);
    },

    render:function() {
        if(!this.hasNav){
            var bannerNavInner="";
            for (var i=1;i<=this.imgAllNum ;i++ ){
                bannerNavInner += "<li>"+i+"</li>";
            }
            this.nav.update(bannerNavInner);
        }
        this.nav.childElements().each(function(o,i){
            this.hideNav(o);
            o.observe(this.event,this.changeBanner.bind(this,i,false,true));
        }.bind(this));
        this.showNav(this.nav.childElements()[0]);
        this.main.childElements().each(function(o,i){
            if(i){
                switch (this.type){
                    case 1:
                        o.down().setStyle({width:"0px",height:"0px"});
                    break;
                    case 2:
                        o.down().setStyle({
                            width:"0px",height:"0px",
                            left:this.bannerDims.width/2+"px",top:this.bannerDims.height/2+"px"
                        });
                    break;
                    case 3:
                        o.setStyle({left:this.bannerDims.width+"px"});
                    break;
                    case 4:
                        o.setStyle({top:this.bannerDims.height+"px"});
                    break;
                    default:
                        o.setStyle({display:"none"});
                }
            }
        }.bind(this));
    },

    start:function() {
        if(!this.intervarID) {
            this.intervarID = new PeriodicalExecuter(this.changeBanner.bind(this,this.isShowNum,true,true), this.interval);
        }
    },

    stop:function() {
        if(this.intervarID){
            this.intervarID.stop();
            this.intervarID = 0;
        }
    },

    toggle:function() {
        this.intervarID?this.stop():this.start();
    },

    next:function() {
        this.stop();
        this.changeBanner(this.isShowNum,true,true);
        this.start();
    },

    prev:function() {
        this.stop();
        this.changeBanner(this.isShowNum,true,false);
        this.start();
    },

    setInterval:function(interval) {
        this.interval = interval;
        this.stop();
        this.start();
    },

    changeBanner:function(i,isAuto,isNext) {
        this.hideNav(this.nav.childElements()[this.isShowNum]);
        this.hideImg(this.main.childElements()[this.isShowNum],this.type,this.dur,this.bannerDims);
        isAuto ? (isNext?this.isShowNum++:this.isShowNum--) : this.isShowNum = i;
        if (this.isShowNum == this.imgAllNum){
            this.isShowNum = 0;
        }
        if (this.isShowNum < 0){
            this.isShowNum = this.imgAllNum-1;
        }
        this.showNav(this.nav.childElements()[this.isShowNum]);
        this.showImg(this.main.childElements()[this.isShowNum],this.type,this.dur,this.bannerDims);
    },

    showImg:function(element,type,dur,dims) {
        switch (type){
            case 1:
                new Effect.Morph(element.down(), { style:"width:"+dims.width+"px;height:"+dims.height+"px;",duration: dur });
            break;
            case 2:
                new Effect.Morph(element.down(), {
                    style:"width:"+dims.width+"px;height:"+dims.height+"px;left:0px;top:0px;",
                    duration: dur
                });
            break;
            case 3:
                new Effect.Morph(element, { style:"left:0px",duration: dur });
            break;
            case 4:
                new Effect.Morph(element, { style:"top:0px",duration: dur });
            break;
            default:
                element.appear({duration: dur});
        }
    },

    hideImg:function(element,type,dur,dims) {
        switch (type){
            case 1:
                new Effect.Morph(element.down(), { style:"width:0px;height:0px;",duration: dur });
            break;
            case 2:
                new Effect.Morph(element.down(), {
                    style:"width:0px;height:0px;left:"+dims.width/2+"px;top:"+dims.height/2+"px;",
                    duration: dur
                });
            break;
            case 3:
                new Effect.Morph(element, {style:"left:-"+dims.width+"px",duration: dur,
                    afterFinish:function(){element.setStyle({left:dims.width+"px"})}    
                });
            break;
            case 4:
                new Effect.Morph(element, {style:"top:-"+dims.height+"px",duration: dur,
                    afterFinish:function(){element.setStyle({top:dims.height+"px"})}    
                });
            break;
            default:
                element.fade({duration: dur});
        }
    },

    showNav:function(element) {
        if(!this.hasNav) {
            element.setStyle({border:'1px solid #c1f544',display:'none',background: '#f98100'})
        }else{
            element.setStyle({border:'2px solid #c1f544',display:'none'});
        }
    },

    hideNav:function(element) {
        if(!this.hasNav) {
            element.setStyle({border:'1px solid #FFFFFF',display:'none',background: '#333'})
        }else{
            element.setStyle({border:'2px solid #FFFFFF',display:'none'});
        }
    },

    imgOver:function(e) {
        var o = e.element();
        if (o.tagName == "IMG")
        {
            new Effect.Opacity(o, { from: 0, to: 1, duration: 0.3 });
        }
    }
}