var websiteList;

window.addEvent('domready', function() {
	
	var numberofboxes=12;
	var boxX=0;
	var boxY=0;
	var landscaperow='';
	var menuActive=false;
	
	var init=function() {
			
		var currentWebsite;

		for (f=0;f<numberofboxes;f++) {
				
			boxX=240;
			boxY=180;
			landscaperow='landscape-row4';
			
			if (f<9) { boxX=200; boxY=150; landscaperow='landscape-row3'; }
			if (f<6) { boxX=160; boxY=120; landscaperow='landscape-row2';}
			if (f<3) { boxX=120; boxY=90; landscaperow='landscape-row1';}
//			if (f<3) { boxX=80; boxY=60; landscaperow='landscape-row1';}
			
			if (f==0 || f==3 || f==6 || f==9) {
			
				var newlement=new Element('div', {
					'id': 'landscape-' + parseInt((f+3)/2)
				});
			
				newlement.inject($('landscape-container'), 'bottom');
				
			}
			
			newWebsite(newlement, 'bottom', boxX, boxY, landscaperow + ' website', '1');
		}
		
	};

	var newWebsite=function(siteElement,siteLocation,siteWidth,siteHeight,siteClass,siteOpacity) {
		
		var currentSite=$random(0,websiteList.websites.length-1);
		
		var newImage = new Element('img', {
				'src': '/images/screenshots/' + websiteList.websites[currentSite].site.imagename,
		    'class': siteClass,
		    'width': siteWidth,
		    'height': siteHeight,
		    'events': {
		        'click': function(){
		            websiteClicked(websiteList.websites[currentSite].site.uri);
		        }
		    }
		});
		
		newImage.set('opacity',siteOpacity);
		
		newImage.inject(siteElement, siteLocation);
			
	};
	
	var websiteClicked=function(uri) {
		
		document.location='http://' + uri + '?active=1';	

	};
	
	var removeWebsite=function(el) {
		
		var removedElement = el.dispose();
		
	};
	
	var fadeRow=function(classToFade,opacity,removeElement) {
		
		theelements=$$(classToFade);
		
		$each(theelements, function(el, index){
			
			var myEffect = new Fx.Morph(el, {duration: 1000, transition: Fx.Transitions.Sine.easeOut});
			 
			myEffect.start({
				'opacity': opacity
			});

			if (removeElement) {
				var timeoutID = removeWebsite.delay(1000,el,el);	
			}
			
		});
		
	};
	
	var resizeRow=function(startClass,newClass,newWidth,newHeight) {
		
		theelements=$$(startClass);
		
		$each(theelements, function(el, index){
			
			var myEffect = new Fx.Morph(el, {duration: 1500, transition: Fx.Transitions.Sine.easeOut});
			 
			myEffect.start({
				'width': newWidth,
				'height': newHeight
			});
			
			el.set('class',newClass + ' website');
			
		});
		
	};
	
	var showNewImagesBack=function() {
		
		var newlement=new Element('div', {
			'class': 'showdiv'
		});
	
		newlement.inject($('landscape-container'), 'top');
		
		for (f=0;f<3;f++) {
			
			newWebsite(newlement, 'top', 120, 90, 'landscape-row1 website', '0');

		}
		
	};
	
	var showNewImagesFront=function() {
		
		var newlement=new Element('div', {
			'class': 'showdiv'
		});
	
		newlement.inject($('landscape-container'), 'bottom');
		
		for (f=0;f<3;f++) {
			
			newWebsite(newlement, 'bottom', 240, 180, 'landscape-row4 website', '0');

		}
		
	};
	
	var moveForward=function() {

		fadeRow('.landscape-row4',0,true);
		
		resizeRow('.landscape-row3','landscape-row4',240,180);
		resizeRow('.landscape-row2','landscape-row3',200,150);
		resizeRow('.landscape-row1','landscape-row2',160,120);
		
		showNewImagesBack();
			
		fadeRow('.landscape-row1',1,false);
		
	};
	
	var moveBack=function() {

		fadeRow('.landscape-row1',0,true);

		resizeRow('.landscape-row2','landscape-row1',120,90);
		resizeRow('.landscape-row3','landscape-row2',160,120);
		resizeRow('.landscape-row4','landscape-row3',200,150);
		
		showNewImagesFront();
		
		fadeRow('.landscape-row4',1,false);
		
	};
	
	var activateMenu=function() {
		menuActive=false;
	};
	
	$('forward').addEvent('click', function(event) {

		if (menuActive==false) { 
			menuActive=true;
			moveForward();
			activateMenu.delay(1600);
		}
	
		return false;
		
	});
	
	$('back').addEvent('click', function(event) {

		if (menuActive==false) {
			menuActive=true;
			moveBack();
			activateMenu.delay(1600);
		}
		
		return false;
		
	});

	//page loading
	
	var ajaxpage=function (pageurl){
	
		var page_request = false;
		
		if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest();
		else if (window.ActiveXObject){ // if IE
		try {
		page_request = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e){
		try{
		page_request = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e){}
		}
		}
		else
		return false;
		
		page_request.onreadystatechange=function(){loadpage(page_request);}
		
		page_request.open('GET', pageurl, true);
		page_request.send(null);
	};
	
	var loadpage=function(page_request){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
			websiteList = eval( "(" + page_request.responseText + ")" );
			// create boxes
			init();
		}
	};
	
	var getrand=function() {
		return (Math.floor(10000*Math.random()));
	};
	
	// get website list
	ajaxpage('getwebsites.asp?r=' + getrand());
	
});