/*get width of window*/
function GetSize(){
var x = Array();
	if (self.innerHeight){
		x[1] = self.innerWidth;
		x[2] = self.innerHeight;
	}else if (document.documentElement && document.documentElement.clientHeight){
		x[1]  = document.documentElement.clientWidth;
		x[2]  = document.documentElement.clientHeight;
	}else if (document.body){
		x[1]  = document.body.clientWidth;
		x[2]  = document.body.clientHeight;
	}
return x;
}

var all_id=Array();
var all_images=Array();
var all_width=Array();
var all_height=Array();
var active_image=0;
var dom_ready=false;
var change_not_busy=true;

function inspect_width(){
	var page = document.getElementById('layout');
	var gen_size=GetSize();//width of window
	var gen_width=gen_size[1] ;
	var gen_height=gen_size[2] ;

	if(gen_width < 600){
		page.style.width="600px";
	}else{
		page.style.width="auto";
	}
	
	if(gen_height < 400){
		page.style.height="400px";
	}else{
		page.style.height=gen_height+"px";
	}

	change_active_image_size(gen_width,gen_height);
	
}

function change_active_image_size(gen_width,gen_height){
	if(window.dom_ready){

		var window_ratio=gen_width/gen_height;
		var image_ratio=window.all_width[window.active_image] / window.all_height[window.active_image];
		
		
		if(window_ratio > image_ratio){
			window.all_images[window.active_image].width=gen_width;
			window.all_images[window.active_image].height=gen_width/image_ratio;
			//have to play a bit with div position because of vertical alignment
			var t=Math.round((gen_height - gen_width/image_ratio)/2);
		//	alert(t);
			$(window.all_id[window.active_image]).setStyle('top', t+'px');
		}else{
			window.all_images[window.active_image].height=gen_height;
			window.all_images[window.active_image].width=gen_height*image_ratio;
			//restore top position
			$(window.all_id[window.active_image]).setStyle('top', '0');
		}

	}
}

function nextImage(){

}

var forP = function startSliding(){
//getElementsByTagName("img")[0]

	var once=true;
	
//	$(window.all_id[window.active_image]).setStyle('display', 'none');
	
	exampleFx = new Fx.Tween('images', {
		property: 'opacity',
		duration: 1500, 
		onComplete : function(){
			if(once){
				$(window.all_id[window.active_image]).setStyle('display', 'none');

				if(window.active_image+1 < window.all_images.length){
					//next is active
					active_image=active_image+1;
				}else{
					//show first image
					active_image=0;
				}
				
				inspect_width();
				
				$(window.all_id[window.active_image]).setStyle('display', 'block');
				
				exampleFx.start(0,1);
				once = false;
			}
		}
	});

	exampleFx.start(1,0); /*fade it*/

}

window.addEvent('domready', function(){

	var b = $('images').getElementsByTagName("div");
	
	for(var i=0;i<b.length;i++){
		window.all_id[i]= b[i].id;
		window.all_images[i]= b[i].getElementsByTagName("img")[0];
		window.all_width[i]= b[i].getElementsByTagName("img")[0].getAttribute("width");
		window.all_height[i]= b[i].getElementsByTagName("img")[0].height;
		
		if(i>0){
			//hide this block
			$(b[i].id).setStyle('display', 'none');
		}
	}
	
	window.dom_ready=true;
	
	forP.periodical(7000);
	
	$('images').setStyle('opacity','0');
	exampleFx = new Fx.Tween('images', {
		property: 'opacity',
		duration: 1500
	});
	exampleFx.start(0,1);
	
	inspect_width();
	
});