/* Home page images */

var ECDHomeImages = Class.create({

	setCookie: function(value) { document.cookie = "ecdPanDisable="+value+"; path=/"; },
	getCookie: function() {
		var nameEQ = "ecdPanDisable=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	},
	
	show_image: function (index) {
		if (this.busy || !this.images[index]) return;
		this.busy = true;
		
		this.images[index].setStyle({backgroundPosition:'0 0'});
		if (!this.images[this.currentIndex])
			new Effect.Appear(this.images[index],{duration:1.5,afterFinish: this.image_appear.bind(this)});
		else
			new Effect.Parallel([
					new Effect.Fade(this.images[this.currentIndex],{sync:true,duration:1.5}),
					new Effect.Appear(this.images[index],{sync:true,duration:1.5})
					],{afterFinish: this.image_appear.bind(this)});
		$$('#home-images .tab.active').invoke('removeClassName','active');
		this.tabs[index].addClassName('active');
		this.currentIndex = index;
		this.pan_image();
	},
	
	// effect handles
	pan_effect1: undefined,
	pan_effect2: undefined, 
	next_image_timer: undefined,
	pan_disabled: false,
	
	pan_image: function () {
		if (!this.pan_disabled) {
			if (this.pan_effect2)
				this.pan_effect2.cancel();
			
			var pan_effect = new Effect.Morph(this.images[this.currentIndex],{style:'background-position: -145px 0px',
															transition: Effect.Transitions.linear,
															duration:8});
			this.pan_effect2 = this.pan_effect1;
			this.pan_effect1 = pan_effect;
		}	
		if (this.next_image_timer)
			clearTimeout(this.next_image_timer);
		
		this.next_image_timer = this.next_image.bind(this).delay(6.2);
	},
	
	disable_pan: function () { 
		this.pan_disabled = !this.pan_disabled; 
		if (this.pan_disabled) {
			if (this.pan_effect1)
				this.pan_effect1.cancel();
			if (this.pan_effect2)
				this.pan_effect2.cancel();
		} else {
			this.pan_image();
		}
		this.setCookie((this.pan_disabled)?1:0);
		this.toggle_button.update((this.pan_disabled)?'Enable motion':'Disable motion'); 
	},
	
	disable_click: function () { 
		this.disable_pan();
	},
	
	imageCount:0,	
	currentIndex:-1,
	
	image_appear: function() { 
		this.busy = false; 
	},
	
	next_image: function () {
		var nextIndex = this.currentIndex+1, 
			imagesAttempted = 0;
		
		while (!this.images[nextIndex] || !this.images[nextIndex].loaded) {
			if (nextIndex>=this.imageCount)
				nextIndex = 0;
			else
				nextIndex++;
				
			imagesAttempted++;
			if (imagesAttempted>this.imageCount) 
				break;
		}
		if (this.images[nextIndex] && this.images[nextIndex].loaded) 
			this.show_image(nextIndex);
	},
	
	tab_click: function (ev) {
		var el = Event.element(ev), index = Number(el.innerHTML)-1;
		if (this.images[index] && this.images[index].loaded)
			this.show_image(index);
	},
	
	image_load: function (ev,index) { 
		this.images[index].loaded = true; 
		this.tabs[index].removeClassName('disabled');
		this.start(); 
	},
	
	window_loaded: false,
	window_load: function () { this.window_loaded = true; this.start(); },
	
	started: false,
	start:function () {
		if (this.started) return false;
		if (this.window_loaded && this.images.any(function(el){return el.loaded;})) {
			this.started = true;
			this.next_image();
			this.loading_div.remove();
		}
	},
	
	imagePreloaders: [],
	initialize: function () {
		var cookie;
		this.element = $('home-images');
		if (!this.element) return;
		
		this.element.addClassName('js');
		
		this.loading_div = new Element('div',{id:'home-images-loading'}).update('Loading...');
		this.element.insert(this.loading_div);
		
		this.images = $$('#home-images .image');
		this.imageCount = this.images.length;
		this.tabs = [];
		this.images.each(function(el,i){
			var img, s, m, tab;
			el.hide(); 
			img = new Image();
			$(img).observe('load',this.image_load.bindAsEventListener(this,i)); 
			s = el.getStyle('backgroundImage');
			m = s.match(/url\("?(.+?)"?\)/i);
			if (m)
				img.src = m[1];
			this.imagePreloaders.push(img);
			
			tab = new Element('div',{'class':'tab disabled','style':"z-index: "+(this.imageCount-i)}).update(i+1)
							.observe('click',this.tab_click.bind(this));
			$$('#home-images .tabs').first().insert(tab);
			this.tabs.push(tab);
		},this);
		
		this.toggle_button = new Element('div',{id:'home-images-toggle'})
								.update('Disable motion')
								.observe('click',this.disable_click.bind(this));
		this.element.insert({bottom:this.toggle_button});

		cookie = this.getCookie();
		if (cookie==true)
			this.disable_pan();
		
		Event.observe(window,'load',this.window_load.bind(this));
		
	}
});

document.observe('dom:loaded',function () { 
	window.ECDHomeImages = new ECDHomeImages(); 
});