var gallery = Class.create();
gallery.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':"galleryNav"})}).down();//导航
		this.main = this.nav.next();//banner
		if(!this.main)return;
		this.imgAllNum = this.main.childElements().length;
		if(this.imgAllNum == 0)return;
		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(1).setStyle({width:"0px",height:"0px"});
					break;
					case 2:
						o.down(1).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(1), { style:"width:"+dims.width+"px;height:"+dims.height+"px;",duration: dur });
			break;
			case 2:
				new Effect.Morph(element.down(1), { 
					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(1), { style:"width:0px;height:0px;",duration: dur });
			break;
			case 2:
				new Effect.Morph(element.down(1), {
					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',background: '#f98100'})
		}else{
			element.setStyle({border:'2px solid #c1f544'});
		}
	},

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

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