//Ajax-Indicator
var myGlobalHandlers = {
	onCreate: function(){
		Element.show('loaderImg');
	},
	onComplete: function() {
		if(Ajax.activeRequestCount == 0){
			Element.hide('loaderImg');
		}
	}
};
Ajax.Responders.register(myGlobalHandlers);

Event.observe(window, 'load', function() {

	$$('#nav li').each(function(e){
	
		Event.observe(e, 'click', function(e){
			
			// stop the link effect
			Event.stop(e);
			// stop observing all others, to prevent double clicks
			$$('#nav li').invoke('stopObserving', 'click');		
			var element = Event.element(e);
			$$('#nav li').invoke('removeClassName','loaded');
			var clicked = element.up()
			
			//add loaded classname to li 
			$(clicked).addClassName('loaded');
			// loadPhone function enables the observe
			if(element.id != "showmovie"){
				loadPhone(clicked.id);
			}else{
				showMovie();
			}

		});


	});
	
});

function enableClick(){
	$$('#nav li').each(function(e){
	
		Event.observe(e, 'click', function(e){
			
			// stop the link effect
			Event.stop(e);
			// stop observing all others, to prevent double clicks
			$$('#nav li').invoke('stopObserving', 'click');		
			var element = Event.element(e);
			$$('#nav li').invoke('removeClassName','loaded');
			var clicked = element.up()
			
			//add loaded classname to li 
			$(clicked).addClassName('loaded');
			// loadPhone function enables the observe
			if(element.id != "showmovie"){
				loadPhone(clicked.id);
			}else{
				showMovie();
			}

		});


	});
}
var count = 0;
function loadPhone(imgId){

	new Effect.Parallel([
			new Effect.Move ('scroll',{ sync: true, y: 470, x: 0})//,
			//new Effect.Opacity('scroll', { sync: true, from: 1, to: 0})
		  
		], {
			duration: 0.5,
			afterFinish: function () {
				$('scroll').setStyle({
			    //	left: 0
			  	});
			  
				
				new Ajax.Updater(
					'scroll',
					'pages/phones.php', 
					{
						parameters: 'imgId='+imgId,
						requestHeaders: ['Expires', 'Thu, 17 May 2001 10:17:17 GMT', 'Cache-Control', 'no-cache, must-revalidate', 'Pragma', 'no-cache'],
						onSuccess: function() {
							enableClick();
							$('scroll').setStyle({
						    //	left: 100
						  	});
							new Effect.Parallel([
									new Effect.Move ('scroll',{ sync: true, y: -470, x: 0})//,
									//new Effect.Opacity('scroll', { sync: true, from: 0, to: 1})
								],{ 
									duration: 0.5
								});	
							// observe the links 
													
						}
					}
			  	);
			}
		}
	);
	count++;
	if(count == 5){
		count = 0;
	}
	
}

function preloadImages() {
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}

function showMovie(){
	
	getPageSize();
		
	var flashvars = {};
	var params = {};
	params.wmode = "transparent";
	var attributes = {};
	swfobject.embedSWF("m155.swf", "m155movie", "800", "600", "9.0.0", false, flashvars, params, attributes);
	
}

// close the overlay
function closeOverlay(){
	new Effect.Fade($('popup'), {delay:0.3, from:0.8, to:0.0, duration: 0.5 });
	new Effect.Fade($('overlayBox'), {duration: 0.2 });
	$('popup').stopObserving('click', closeOverlay);
	$('closeOverlay').stopObserving('click', closeOverlay);
	
	enableClick();
}

// fixes the 100% height and 100% cross browser
function getPageSize(){	
	if( window.innerHeight && window.scrollMaxY ){ // Firefox
		pageWidth = window.innerWidth + window.scrollMaxX;
		pageHeight = window.innerHeight + window.scrollMaxY;
	}
	else if( document.body.scrollHeight > document.body.offsetHeight ){ // all but Explorer Mac
		pageWidth = document.body.scrollWidth;
		pageHeight = document.body.scrollHeight;
	}
	else{ // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		pageWidth = document.body.offsetWidth + document.body.offsetLeft; 
		pageHeight = document.body.offsetHeight + document.body.offsetTop; 
	}

	var vph = document.viewport.getHeight(); // is viewport height
	var overlayBox = $('overlayBox').getHeight();
	var marginTop = (vph- overlayBox)/2;
	if(marginTop < 30) marginTop = 30;

	$('overlayBox').setStyle({ top: marginTop + 'px'});
	
	$('popup').setStyle({ width: '100%', height: pageHeight + 'px' });
	new Effect.Appear($('popup'), {from:0.0, to:0.95, duration: 0.5 });
	new Effect.Appear($('overlayBox'), {delay:0.6, duration: 0.4 });
	$('popup').observe('click', closeOverlay);
	$('closeOverlay').observe('click', closeOverlay);
		
}