var headlineDelay = 1000;
var slideDelay = 2000;
var container = null;
var isiPad = null;
var isiPhone = null;
var imgs = null;
var imgD;
var store;

window.addEvent('domready', function(){	
	var footer = document.id("footer");
	
	footer.setStyle("display","none");
	detectDevice();
    

	animationHandler();
	
	chooseImageSet();
	
	imgs = store.getElements('img');		
	
	imgD = {
		y : imgs[4].get('height'),
		x : imgs[4].get('width')
	}
		
	backgroundHandler();
	fader();
	
	//align footer	
	var footer = document.id('footer');	
	if(!isiPhone){
		var setFooter = function(){
			if(footer){
				footer.setStyle('top',window.getSize().y - parseFloat(footer.getStyle('height')) + 'px');	
				footer.setStyle("display","block");
			}
		}	
	}
	setFooter.delay(200);;	
	window.addEvent('resize',function(evt){
		setFooter();		
		backgroundHandler();
	});
	

	
});

function chooseImageSet(){

	if((screen.width / screen.height) > 1.4){  
		//widescreen 
		store = document.id('storeWide');		
	}else{
		store = document.id('store');
	}
}

function backgroundHandler(){

	var winD = window.getSize();	
		
	//make image fit the window dimension
	var multipler = imgD.y / imgD.x;	
	var newHeight = winD.x * multipler;
	multipler = imgD.x / imgD.y;
	var newWidth = winD.y * multipler;
	
	if(newHeight < winD.y){
		Array.each(imgs, function(img){
			img.set('width',winD.x * (winD.y / newHeight));			
			img.set('height',winD.y);
		//	document.head.getElement('title').set('html',winD.x * (winD.y / newHeight) + ' -- ' + winD.y);
		});
	}else{	
		Array.each(imgs, function(img){			
			img.set('width',winD.x);
			img.set('height',winD.y * (winD.x / newWidth));
		});
	//	document.head.getElement('title').set('html',winD.x + ' -- ' + winD.y * (winD.x / newWidth));
	}		
}

function fader(){
	var changer = new kamContentChanger('wrapper',{
		cellsElement: store,
		autoChange: true,
		changeInterval:6000
	});
}

function animationHandler(){	
	var holders = $$('.container');
	// array of container morphs
	var containerArray = new Array();
	// array of headline morphs
	var headlineArray	= new Array();
	var headlineArrayOut = new Array();
	var innerDivArray = new Array();
	var pointer = 0;	
	
	var headlines= function(){
		if(holders[0]){
			var lis = holders[0].getElements('li');
			pointer = 0;
			
			lis.each( function(li, key){
				if(key > 0) li.setStyle('width','0');
				
				innerDivArray[innerDivArray.length] = new Fx.Morph(li.getElement('div'),{
					duration:300,
					onComplete: function(evt){
						evt.setStyle('text-indent','0');
					}
				});
				headlineArrayOut[headlineArrayOut.length] = new Fx.Morph(li,{ duration: 300 });
				
				headlineArray[headlineArray.length] = new Fx.Morph(li, {
					duration: 300,
					onComplete: function(){
						var outMorph = function(){
							
							headlineArray[pointer].start({'width':'0', 'margin-left':'350px'});
							innerDivArray[pointer].start({'text-indent':'-350px'});
							
							pointer++;	
							
							if (pointer == headlineArray.length) pointer = 0;
							
							var inMorph = function(){
								headlineArrayOut[pointer].set({'margin-left':'0','width': '0'});
								headlineArrayOut[pointer].start({'width':'350px'}); 
							}
							
							inMorph.delay(300);
							
						}
						outMorph.delay(4000);
					}
				});
			});
			
			headlineArray[pointer].start({'width':'0', 'margin-left':'350px'});
			innerDivArray[pointer].start({'text-indent':'-350px'});
			pointer++;
			
			var delayed = function(){
				headlineArrayOut[pointer].set({'margin-left':'0','width': '0'});
				headlineArrayOut[pointer].start({'width':'350px'}); 
			}
			delayed.delay(500);
			
			
		}
	}
		
	holders.each( function(holder, key){
		holder.setStyle('width','0px');		
		
		if(key == 0) holder = holder.getElements('li')[0];
		containerArray[containerArray.length] = new Fx.Morph(holder, {
			transition: 'quad:out',	
			duration: 800,
			onComplete: function(){
				//because first container doesn't morph to width set the width once its inner li has slid in 
				if(pointer == 0) holders[0].setStyles({'width':'350px','background':'none'});
				pointer++;
				(pointer < containerArray.length) ?	containerArray[pointer].start({'width':'350px'}) : headlines.delay(headlineDelay);
			}
		});
	});	
	
	start = function(){
		containerArray[pointer].start({'width':'350px'});		
	}		
	start.delay(slideDelay);
}

function detectDevice(){
	isiPad = navigator.userAgent.match(/iPad/i) != null;	
	isiPhone = navigator.userAgent.match(/iPhone/i) != null;	
}