//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() {
	
	
	if($('animatedImpression') != null){
	// fade in ul li in rounded block
	var li,startAfter,scale,timeout;
	for (var x = 1; x <= 9; x++){
		li 			= 'r'+x;
		startAfter	= 1.5 * x;
		scaleAfter	= (1.5 * x) + 1;
		timeOut		= (scaleAfter+0.5) * 1000;
		$(li).setStyle({ 
			color: '#333' //#1669b3 = bl
	  	});
	
		new Effect.Appear($(li), {delay: startAfter, duration: 0.5 });
		new Effect.Scale($(li), 80,{delay: scaleAfter});
		//setTimeout( '$("'+li+'").setStyle({ listStyleType: \'none\' })',timeOut);
		new Effect.Morph($(li), {style: 'color: #838383;', duration: 0.5, delay: scaleAfter});
	 }
	}


	// oberve nav bar in rounded block
	$$('#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
			loadPhone(clicked.id);	
			
			//update the label
			var txt = (clicked.id).toUpperCase();
			if(clicked.id == "m155"){
				$('label').innerHTML = 'DECT M155 Messenger';
			}else if(clicked.id == "ap300"){
				$('label').innerHTML = 'AP300 Access Point';
			}else{
				$('label').innerHTML = 'DECT ' + txt + ' Handset';
			}
		
		});
	});

	// preload the png presentation img
	preloadImages('images/phones/dect_g355.png','images/phones/dect_i755.png','images/phones/dect_c124.png','images/phones/m155_side.png');
	
});

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
			loadPhone(clicked.id);	
			
			//update the label
			var txt = (clicked.id).toUpperCase();

			if(clicked.id == "m155"){
				$('label').innerHTML = 'DECT M155 Messenger';
			}else if(clicked.id == "ap300"){
				$('label').innerHTML = 'AP300 Access Point';
			}
			else{
				$('label').innerHTML = 'DECT ' + txt + ' Handset';
			}
		});


	});
}
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/impression.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];}}
}