var hui_gallery2 = new Class({
	Implements	:[Events, Options],
	this_index	:0,
	bn_array		:[],
	title_array	:[],
	pic_array		:[],
	stop				:	false,
	options: {
		"id"	:"gallery2",
		"items":"div a",
		"main_class":"gallery",
		"nav_class":"main",
		"bottom_class":"main_bg",
		"link_normal_classname":"normal",
		"link_select_classname":"select",
		"pic_class":"pic",
		"duration":1000,//图片效果播放时间
		"run"			:"top",//图片效果left,top,right,opacity
		"auto"		:true//自动播放
	},
	initialize: function(options){
		this.setOptions(options);
		this.items	=	$$("#"+options.id+" "+options.items);
		this.create_code();
		this.auto_run();
	},
	auto_run:function(){
		if(this.options.auto ){
			this.f = function(){
				var index	=	this.this_index+1;
				
				if(index>=this.pic_array.length){
					index	=	0;
				}
				this.this_index	=	index;
				if(!this.stop){this.run(index)}
			};
			this.f.periodical(this.options.timer, this);
		}
	},
	create_code:function(){
		var options		=	this.options;
		this.container	=new Element('div', {	"class"		:options.main_class,
																					"events"	:{
																						"mouseenter":function(e){
																							this.stop_it();
																							
																						}.bind(this),
																						"mouseleave":function(e){
																							this.do_it();
																							
																						}.bind(this)
																					}
																				});
		this.bottom_div	=new Element('div',{"class":options.nav_class});
		this.background_div	=new Element('div',{"class":options.bottom_class});
		//var title_ul	=new Element('ul',{});
		var bn_ol	=new Element('ol',{});
		this.background_div.inject(this.bottom_div);
		var pic_array	=	[];
		var pic_back_array	=	[];
		var bn_array	=	[];
		var title_array	=	[];
		this.items.each(function(item,index){
			var children_items	=	item.getChildren();
			var a_link	=	item.get("href");
			/*var pic_item	=new Element('div', {	"class":options.pic_class,
													"styles":{"z-index":10},
													"html":children_items[0].get("html")});*/
			var pic_item	=new Element('div', {	"class":options.pic_class,
													"styles":{"z-index":10}});
			$(children_items[0]).inject(pic_item);
			//背景
			if(children_items[1]){
				pic_back_array[pic_back_array.length]	=	$(children_items[1]).get("src");
			}
			pic_array[pic_array.length]	=	pic_item;
			pic_item.inject(this.container);
			var bn_li_a_class	=options.link_normal_classname;
			if(index	==	0){
				bn_li_a_class	=options.link_select_classname;
			}
			var bn_li	=new Element('li', {	"html":"<a class="+bn_li_a_class+" href=\"#\">"+(index+1)+"</a>",
																			"events":{"click":function(e){
																				e.stop();
																				this.run(index);
																			}.bind(this)}
																		});
			bn_array[bn_array.length]	=	bn_li;
			bn_li.inject(bn_ol);

			//var title_li_display	=	"none";
			//if(index	==	0){
			//	title_li_display	=	"";
			//}
			//var title_li	=new Element('li', {	"html":children_items[1].get("html"),"styles":{"display":title_li_display}});
			//console.log(children_items[1]);
			//title_array[title_array.length]	=	title_li;
			//title_li.inject(title_ul);
		}.bind(this));
		//title_ul.inject(this.bottom_div);
		bn_ol.inject(this.bottom_div);
		this.bottom_div.inject(this.container);
		this.container.inject($(this.options.id),"before");
		this.bn_array	=	bn_array;
		this.title_array	=	title_array;
		this.pic_array	=	pic_array;
		this.pic_back_array	=	pic_back_array;
		//console.log(this.pic_items);
	},
	stop_it:function(){
		this.stop	=	true;
	},
	do_it:function(){
		this.stop	=	false;
	},
	run:function(index){
		var options	=	this.options;
		this.pic_array.each(function(pic_item,pic_index){
			if(pic_index==index){
			}else if(pic_index == this.this_index){
			}else{
				pic_item.set("styles",{"z-index":10});	
			}
		});
		this.bn_array.each(function(bn_item,bn_index){
			bn_item.getChildren()[0].set("class",options.link_normal_classname);
		}.bind(this));
		this.title_array.each(function(title_item,title_index){
			if(title_index==index){
				title_item.set("styles",{"display":""});
			}else{
				title_item.set("styles",{"display":"none"});
			}
		}.bind(this));
		var pic	=	this.pic_array[index];
		var now_pic	=	this.pic_array[this.this_index];
		now_pic.set("styles",{"z-index":20});
		if(options.run	==	"top"){
			var top	=	pic.getStyle("height")
			pic.set("styles",{"top":top,"z-index":200});
			var pic_fx	=new Fx.Tween(pic, {
					duration	:options.duration,
					transition: Fx.Transitions.linear.easeOut,
					link: 'cancel',
					property: 'top'
			});
			pic_fx.start(top, 0);
			
		}
		if(options.run	==	"left"){
			var left	=	pic.getStyle("width").toInt();
			pic.set("styles",{"left":(-1*left+'px'),"z-index":200});
			var pic_fx	=new Fx.Tween(pic, {
					duration	:options.duration,
					transition: Fx.Transitions.linear.easeOut,
					link: 'cancel',
					property: 'left'
			});
			pic_fx.start((-1*left), 0);
		}
		if(options.run	==	"right"){
			var right	=	pic.getStyle("width").toInt();
			pic.set("styles",{"left":(right+'px'),"z-index":200});
			var pic_fx	=new Fx.Tween(pic, {
					duration	:options.duration,
					transition: Fx.Transitions.linear.easeOut,
					link: 'cancel',
					property: 'left'
			});
			pic_fx.start(right, 0);
		}
		if(options.run	==	"opacity"){
			var pic_fx = new Fx.Morph(pic, {duration: options.duration});
			pic.set("styles",{"opacity":0,"z-index":200});
			pic_fx.start({
					'opacity': [0,100]
			});
			if(this.pic_back_array[this.this_index]){
				$$('.index_main')[0].set("styles",{"background":"url('"+this.pic_back_array[index]+"') repeat-x scroll left top transparent"});
			}
		}
		this.this_index	=	index;
		this.bn_array[index].getChildren()[0].set("class",this.options.link_select_classname);
	}
});

var hui_up_down = new Class({
	Implements: [Events, Options],
	options: {
		"ul_tag":"ul",
		"duration":500
	},
	initialize: function(mover_id,top_id,down_id,options){
		this.setOptions(options);
		this.top_index = 0;
		this.ul_tag = this.options.ul_tag;
		this.mover = $(mover_id);
		this.top_bn = $(top_id);
		this.down_bn = $(down_id);
		this.ul = this.mover.getChildren(this.ul_tag)[0];
		this.lis = this.ul.getChildren();
		this.down_index = this.lis.length-1;
		this.ul_height = 0;
		this.lis.each(function(item,index){
			this.ul_height += this.get_height(item);
		}.bind(this));
		this.ul.set("styles",{ "height":this.ul_height,	"top":0 });
		this.ul_clone = this.ul.clone().inject(mover_id);
		this.ul_clone.set("styles",{ "top":this.ul_height });
		var duration = this.options.duration;
		this.ul_fx = new Fx.Tween(this.ul, { "property": 'top', "duration": duration, "transition": Fx.Transitions.Quart.easeInOut});
		this.ul_clone_fx = new Fx.Tween(this.ul_clone, { "property": 'top', "duration": duration, "transition": Fx.Transitions.Quart.easeInOut});
		this.top_bn.addEvent("click",function(e){
			this.top_bn_click();
		}.bind(this));
		this.down_bn.addEvent("click",function(e){
			this.down_bn_click();
		}.bind(this));
	},
	get_height: function(element){
		if(element.getStyle("height")){
			var ls_height = parseInt(element.getStyle("height"));
		}else{
			var ls_height = 0;
		}
		if(element.getStyle("margin-top")){
			var ls_top = parseInt(element.getStyle("margin-top"));
		}else{
			var ls_top = 0;
		}
		if(element.getStyle("margin-down")){
			var ls_down = parseInt(element.getStyle("margin-down"));
		}else{
			var ls_down = 0;
		}
		var height = ls_height + ls_top + ls_down ;
		return height;
	},
	top_bn_click:function(){
		var index = 0;
		if(this.top_index>this.lis.length-1){
			this.top_index = 0;
			this.down_index = this.lis.length-1;
		}
		index = this.top_index;
		var ul_x = this.ul.getStyle("top").toInt();
		var ul_to = ul_x - this.get_height(this.lis[index]);
		this.ul_fx.start(ul_x,ul_to).chain(function(){
			if(this.top_index>=this.lis.length){
				this.ul.set("styles",{"top":0});
				this.ul_clone.set("styles",{"top":this.ul_height});
			}
		}.bind(this));
		var ul_clone_x = this.ul_clone.getStyle("top").toInt();
		var ul_clone_to = ul_clone_x-this.get_height(this.lis[index]);
		this.ul_clone_fx.start(ul_clone_x,ul_clone_to);
		this.top_index++;
		this.down_index = this.top_index-1;
	},
	down_bn_click:function(){
		if( this.down_index == this.lis.length-1){
			this.ul_clone.set("styles",{ "top":this.ul_height*(-1)});
		}
		var index = 0;
		index = this.down_index;
		var ul_x = this.ul.getStyle("top").toInt();
		var ul_to = ul_x + this.get_height(this.lis[index]);
		this.ul_fx.start(ul_x,ul_to).chain(function(){
			if(this.down_index>=this.lis.length-1){
				this.ul.set("styles",{"top":0});
				this.ul_clone.set("styles",{"top":this.ul_height});
			}
		}.bind(this));
		var ul_clone_x = this.ul_clone.getStyle("top").toInt();
		var ul_clone_to = ul_clone_x+this.get_height(this.lis[index]);
		this.ul_clone_fx.start(ul_clone_x,ul_clone_to);
		this.down_index--;
		if(this.down_index<0){
			this.down_index = this.lis.length-1;
			this.top_index = 0;
		}else{
			this.top_index = this.down_index+1;
		}
	}
});