var PageSlide = Class.create({
	initialize : function(contents, buttons, options){
		this.width = 706;
		this.contents = contents;
		this.offset = contents.positionedOffset()[0];
		this.pArrow = $('overlay_prev').down('.arrow');
		this.nArrow = $('overlay_next').down('.arrow');
		this.buttons = buttons.each(function(el,idx){
			el.observe('click', function(ev){
				ev.stop();
				this.go(idx);
			}.bind(this));
		}.bind(this));
		this.slideCount = this.buttons.length;
		if (options.next)
			options.next.observe('click', this.next.bind(this));
		
		if (options.prev)
			options.prev.observe('click', this.prev.bind(this));
		this.go(0);
	},
	go : function(idx){
		this.contents.select('.step')[this.current || 0].fire('nav:go');
		if (idx < 0 || idx >= this.slideCount) return;
		this.current = idx;
		$$('#content_nav .active').invoke('removeClassName', 'active');
		this.buttons[idx].addClassName('active');
		
		if (this.moving) this.moving.cancel();
		this.moving = new Effect.Move(this.contents, {mode: 'absolute', x:(-(idx*this.width)+this.offset), duration: 1, transition:Effect.Transitions.EaseFromTo, afterFinish: function(){
    		this.pArrow.style.display = this.current==0?'none':'block'
    		this.nArrow.style.display = this.current==this.slideCount-1 ? 'none':'block';
		}.bind(this)});
	},
	next : function(ev){
		ev.stop();
		this.go(this.current+1);
	},
	prev : function(ev){
		ev.stop();
		this.go(this.current-1);
	}
});

var Gallery = Class.create({
	initialize : function(container, linkSel, imgSel, loaderSel){
		this.container = container;
		this.links = container.select(linkSel);
		this.imgs = container.down(imgSel);
		this.loader = container.down(loaderSel);
		this.closebtn = container.down('.gallery_image .close');
		this.setup();
	},
	setup : function(){
		this.container.select('.video .thumbnail').each(function(el){
			if (el.hasClassName('href')){
				var vidCont = el.up('.step').down('.video_player');
				this.vid = new PopVideo(el, el.className.split('thumbnail href')[1], vidCont.down('.flashmovie'), vidCont);
			}
		});
		this.links.invoke('observe', 'click', function(ev){
			ev.stop();
			var el = ev.element();
			
			this.container.select('.thumb').invoke('removeClassName', 'active');		
			el.up().addClassName('active');
			this.container.down('.gallery_image').show();
			this.setImage(el.className, this.img);
		}.bind(this));
		this.container.observe('nav:go', this.close.bind(this));
		this.closebtn.observe('click', this.close.bind(this));
		
	},
	killImage : function(oldImage){
		oldImage.fade({afterFinish: function(){oldImage.remove();}, duration: .4});		
	},
	setImage : function(url, oldImage){
		this.loader.show();
		if (! url) return;
		this.img = new Element('img').hide().observe('load', function(){
			this.img.appear({duration: .4, afterFinish: function(){
				if (oldImage){
					this.killImage(oldImage);
				}
			}.bind(this)});
			this.loader.fade();
			this.closebtn.appear({duration: .4});
			
		}.bind(this));
		this.imgs.appendChild(this.img);
		setTimeout(function(){
			this.img.writeAttribute('src', url);
			
		}.bind(this), 250);
	},
	close : function(ev){
		ev ? ev.stop() : 0;
		if (! this.img) return;
		this.killImage(this.img);
		this.img = null;
		this.container.down('.gallery_image').fade();
		this.closebtn.fade();
		this.container.select('.thumb').invoke('removeClassName', 'active');		
	}
	
});

var PopVideo = Class.create({
	initialize : function(trigger, video, target, container){
		this.trigger = $(trigger);
		this.video = video;
		this.target = $(target);
		this.container = container;
		this.thumb = this.trigger.readAttribute('title');
		var titlediv = this.trigger.previous();
		titlediv = titlediv.hasClassName('title') ? titlediv : titlediv.down('.title')
		this.title = titlediv.innerHTML;
		this.setup();
	},
	setup : function(){
		this.trigger.observe('click', this.showPlayer.bind(this));
		this.container.down('.close').observe('click', this.close.bind(this));
		this.boundClose = this.close.bind(this);
	},
	showPlayer : function(ev){
		ev.stop();
		this.swf = new SWFObject('/flash/player.swf', "VIDEO_PLAYER", "413", "285", "8", "#000000");
		this.swf.addParam("wmode", "opaque");
		this.swf.addVariable("video_url", this.video);
		this.swf.addVariable("graphic_url", "/img/thumb/"+this.thumb+".jpg");  //CHECK ME OUT
		this.swf.write(this.target);
		this.container.down('.title').update(this.title);
		this.container.appear({duration: .4});
		this.container.up('.step').observe('nav:go', this.boundClose);
	},
	close : function(ev){
		if(ev) ev.stop();
		this.container.up('.step').stopObserving('nav:go', this.boundClose);
		this.container.fade({duration: .4, afterFinish:function(){
			this.target.innerHTML = '';
		}.bind(this)});
	}
});

Effect.Transitions.EaseFromTo = function(pos) {
    if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
    return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);   
}; 

var ImagePreloader = Class.create({
	initialize : function(paths){
		var b = $$('body').first();
		paths.each(function(p){
			b.insert(new Element('img')
				.writeAttribute('src', p)
				.setStyle({display:'none'}));
		});
	}
});


$$('.step').each(function(el){
	new Gallery(el, 'div.gallery .thumb', '.images', '.loader');
});
p = new PageSlide($('steps'), $$('#content_nav li'), {next:$('nav_next'),prev:$('nav_prev'), width:706});

$$('#nav_prev, #nav_next')
.invoke('observe', 'mouseenter', function(ev){var el=ev.element().previous(); if (el.down('.arrow').visible()) el.addClassName('over');})
.invoke('observe', 'mouseleave', function(ev){var el=ev.element().previous(); if (el.down('.arrow').visible()) el.removeClassName('over');});
	
new ImagePreloader(['/img/process/fade.left.alt.hover.png']);