var Gallery = Class.create(
	{
		initialize:function(ele,options){
			
			this.ele = $(ele);
			this.init ();
			/*
			var thisObj = this;
			Event.observe(window, 'load', function() {
				thisObj.init ();
			});
			*/
		},
		
		// init
		
		init:function(){
			
			var thisObj = this;
			
			this.gallery_image = [];
			this.gallery_image[0] = this.ele.down(".gallery_image").down("div", 0);
			this.gallery_image[1] = this.ele.down(".gallery_image").down("div", 1);
			this.gallery_number = this.ele.down(".gallery_number");
			this.gallery_caption = this.ele.down(".gallery_caption");
			this.gallery_list = this.ele.down(".gallery_list");
			this.gallery_list_items = this.gallery_list.select("img");
			this.gallery_list_items_total = this.gallery_list_items.length;
			
			this.gallery_image.invoke('hide');
			this.ele.select(".btn").invoke('setStyle', 'cursor:pointer');			
			
			this.options = Object.extend({
				duration:4,
				speed:0.02,
				delay:0
			},options);
			
			// scroll
			
			this.position = 0;
			this.loaded_image = 0;
			this.rightSlidePE = null;
			this.downSlidePE = null;
			
			var orig_style = {overflow:this.gallery_list.getStyle("overflow"),width:this.gallery_list.getStyle("width")};
			this.gallery_list.setStyle({overflow:"",width:""});
			
			this.full_width = this.gallery_list.getDimensions().width;							
			this.gallery_list.setStyle(orig_style);
			
			Event.observe(this.ele.down(".gallery_scroll_prev"),"mouseover",function(){thisObj.scrollPrevStart()});
			Event.observe(this.ele.down(".gallery_scroll_prev"),"mouseout",function(){thisObj.scrollPrevStop()});
			Event.observe(this.ele.down(".gallery_scroll_next"),"mouseover",function(){thisObj.scrollNextStart()});
			Event.observe(this.ele.down(".gallery_scroll_next"),"mouseout",function(){thisObj.scrollNextStop()});
			
			// gallery
			
			this.pos = 0;
			this.lastpos = 0;
			this.is_effecting = false;
			this._isPrevius = false;
			
			for (var i=0; i<this.gallery_list_items_total; i++) {
				var e = this.gallery_list_items[i];
				new Effect.Fade($(e), {duration:0.5, to:0.5});
				e.writeAttribute('index', i);
				e.style.cursor = 'pointer';
				Event.observe($(e), 'click', function() {
					thisObj.goto($(this).readAttribute('index'));
				});
				Event.observe($(e), 'mouseover', function() {
					new Effect.Fade($(this), {duration:0.5, to:1});
				});
				Event.observe($(e), 'mouseout', function() {
					if ($(this).readAttribute('index')!=thisObj.pos) new Effect.Fade($(this), {duration:0.5, to:0.5});
				});
			}
			
			Event.observe(this.ele.down(".gallery_btn_pause"),"click",function(){thisObj.pause()});
			Event.observe(this.ele.down(".gallery_btn_stop"),"click",function(){thisObj.stop()});
			Event.observe(this.ele.down(".gallery_btn_play"),"click",function(){thisObj.play()});
			Event.observe(this.ele.down(".gallery_btn_next"),"click",function(){thisObj.next()});
			Event.observe(this.ele.down(".gallery_btn_prev"),"click",function(){thisObj.prev()});
			
			if (this.gallery_list_items.length>1) {
				this.change();
				this.play();
			}
			
		},
		
		// gallery
		
		change:function(){
			
			var thisobj = this;
			
			this.ele.down(".gallery_btn_play").hide();
			this.ele.down(".gallery_btn_stop").show();
			this.ele.down(".gallery_btn_pause").show();
			
			if (this.pos!=this.lastpos) new Effect.Fade(this.gallery_list_items[this.lastpos], {duration:0.5, to:0.5});
			
			new Effect.Fade(this.gallery_list_items[this.pos], {duration:0.5, to:1, from:0.5});
			
			var old_image = this.gallery_image[this.loaded_image];
			var tmp_loading_image = this.loaded_image==1 ? 0 : 1;
			var new_image = this.gallery_image[tmp_loading_image];
					
			var imgPreloader = new Image();
			imgPreloader.onload = function(){
				this.is_effecting = true;
				new_image.down().src = thisobj.gallery_list_items[thisobj.pos].readAttribute('enlarge');
				
				new Effect.Appear(new_image, {duration:1, afterFinish:function(){thisobj.is_effecting = false; }.bind(thisobj)});
				new Effect.Fade(old_image, {duration:1, afterFinish:function(){thisobj.is_effecting = false;}.bind(thisobj)});
				
				thisobj.loaded_image = thisobj.loaded_image==0 ? 1 : 0;
				thisobj.gallery_number.innerHTML = (Number(thisobj.pos)+1)+" of "+thisobj.gallery_list_items_total;
				thisobj.gallery_caption.innerHTML = thisobj.gallery_list_items[thisobj.pos].readAttribute('caption');
			}.bind(this);
			imgPreloader.src = this.gallery_list_items[this.pos].readAttribute('enlarge');
			
		},
		
		play:function(){
			this.pe = new PeriodicalExecuter(
				function(){
					if (!this.is_effecting) {
						this.lastpos = this.pos;
						if((++this.pos)>= this.gallery_list_items.length) this.pos = 0;
						this.change();
					}
				}.bind(this),
				this.options.duration
			);
			this.ele.down(".gallery_btn_play").hide();
			this.ele.down(".gallery_btn_stop").show();
			this.ele.down(".gallery_btn_pause").show();
		},
		
		stop:function(){
			if(!this.is_effecting){
				this.pause();
				this.lastpos = this.pos;
				this.pos = 0;
				this.change();
				this.ele.down(".gallery_btn_play").show();
				this.ele.down(".gallery_btn_stop").hide();
				this.ele.down(".gallery_btn_pause").show();
			}
		},
		
		pause:function(){
			if (this.current_effect) this.current_effect.stop();
			this.pe.stop();
			this.ele.down(".gallery_btn_play").show();
			this.ele.down(".gallery_btn_stop").show();
			this.ele.down(".gallery_btn_pause").hide();
		},
		
		next:function(){
			if(!this.is_effecting){
				this.pause();
				this.lastpos = this.pos;
				if((++this.pos)>= this.gallery_list_items.length) this.pos = 0;
				this.change();
				this.play();
			}
		},
		
		prev:function(){
			if(!this.is_effecting){
				this._isPrevius = true;
				this.pause();
				this.lastpos = this.pos;
				if((--this.pos)<0) this.pos = (this.gallery_list_items.length-1);
				this.change();
				this.play();
				
			}
		},
		
		goto:function(page){
			if(!this.is_effecting){
				this.pause();
				this.lastpos = this.pos;
				this.pos = page;
				this.change();
				this.play();
			}
		},
		
		// scroll 
		
		scrollPrevStart: function(){
			this.scrollNextStop();
			this.rightSlidePE = new PeriodicalExecuter(function(pe) {
				this.gallery_list.scrollLeft -= 4;
				if (this.gallery_list.offsetWidth<this.full_width){
					if (this.gallery_list.scrollLeft>0){
						
					} else {
						this.scrollPrevStop();
					}
				}
			}.bind(this), this.options.speed);
		},
		  
		scrollPrevStop: function(){
			if (this.rightSlidePE!=null) this.rightSlidePE.stop();
		},
		  
		scrollNextStart: function(){
			this.scrollPrevStop();
			this.downSlidePE = new PeriodicalExecuter(function(pe) {
				this.gallery_list.scrollLeft += 4;
				if (this.gallery_list.offsetWidth<this.full_width){
					if (this.full_width-this.gallery_list.offsetWidth>this.gallery_list.scrollLeft){
						
					} else {
						this.scrollNextStop();
					}
				}
			}.bind(this), this.options.speed);
		},
		  
		scrollNextStop: function(){
			if (this.downSlidePE!=null) this.downSlidePE.stop();
		},
		  
		test: function(){
			alert('test');
		}
	}
);

Component.init(".gallery","Gallery",{effect:"fadein"});