// JavaScript Document

//TODO
// 1) Preload images, preload each image as needed, stall the effect until the image is loaded, maybe blank out the screen and show the busy symbol
// 2) Modify styles of close and visit text
 window.addEvent('domready', function() {				 	
		

			
	  var logoImages = $$('.clientLogo');
		
		
		init();
			
		
		
		function init()
		{
						
				
		logoImages.each(
									 function(el, index){
    el.addEvent('mouseover', function(e) {
		      fadeOthers(el, e);							
					});	
		
		el.addEvent('click', function(e) {
		      createPreview(el, e);		
					
					});	
		
				el.addEvent('mouseleave', function(e) {
		      shineAll(e);					
					});	
});
		}
		

		
		function createPreview(image, e) {
			
			e.stop();
			
			//preload the images
			var images = [];
      images[0] = image.get('full');
			
			$('containerDiv').fade(0.1);
			$('advertisingDiv').fade(0.1);
			
			var windowWidth = 800, windowHeight = 600;
			windowWidth = document.documentElement.clientWidth;
      windowHeight = document.documentElement.clientHeight;
			
			var loadStartX = windowWidth/2 - 18;
			var loadStartY = windowHeight/2 - 18;
			
			var loadDiv=new Element('div', {
			'id': 'loadDiv',
			'class': 'loadDiv',
			'styles': {
        'left': loadStartX,
				'top': loadStartY
    }

			
		});
			
			loadDiv.inject($('containerDiv'), 'after');
			
			
						
			var preloader = new ImagePreloader(images,
      function() {
        
			
			// final width will be 400, height will be 400
			
			
			loadDiv.dispose();
			var startX = windowWidth/2 - 200;
			var startY = windowHeight/2 - 200;
			
							
			
	
			var previewDiv=new Element('div', {
			'id': 'clientSitePreview',
			'class': 'clientSitePreviewBegin',
			'styles': {
        'left': startX,
				'top': startY,
				'background-image': 'url('+image.get('full')+')'
    }

			
		});
			
			var footerDiv = new Element('div', {
			'id': 'clientSiteFooter',
			'class': 'clientSiteFooter'
		});
			
		var linkDiv =new Element('div', {
			'id': 'clientPreviewWebLinkDiv',
			'class': 'clientPreviewWebLinkDiv'
		});
		
		var closeDiv =new Element('div', {
			'id': 'clientPreviewCloseDiv',
			'class': 'clientPreviewCloseDiv'
		});
			

    var description = new Element('div', {'class': 'clientPreviewStyle', 'styles': {'padding-bottom': '10px'}});
		
		var webLink  = new Element('a',{'class': 'clientPreviewStyle', 'href': image.get('site'),'target' : 'new', 'text': 'Visit Website'});
		var closeLink  = new Element('a',
																 {'class': 'clientPreviewStyle', 'href': '#','text': 'Close', 
																 'events': {
                                  'click': function(){
                                             previewDiv.dispose();
																						 $('containerDiv').fade(1.0);
																						 $('advertisingDiv').fade(1.0);
                                           }
																					 }
																           }
																					 );
    
		description.appendText(image.get('desc'));

    linkDiv.adopt(description, webLink);
		closeDiv.grab(closeLink);
		
		footerDiv.grab(linkDiv);
		footerDiv.grab(closeDiv);
		previewDiv.grab(footerDiv);
		
		previewDiv.inject($('containerDiv'), 'after');
		
		var myEffect = new Fx.Morph(previewDiv, {duration: 2000, transition: Fx.Transitions.Sine.easeOut});
 
    myEffect.start('.clientSitePreviewEnd');
      }
      ); 
			
			
			
		
	
		
	}
		
		function fadeImage(image, e) {
		  e.stop();
	  	image.fade(0.3);	
		}
		
		function shineImage(image, e) {
		  e.stop();
	  	image.fade(1.0);	
		}	
		
		function fadeOthers(except, e) {
			e.stop();
			
			logoImages.each(
										 function(el, index) {
											 fadeImage(el, e);
										 });
			
			shineImage(except, e);
		}
		
		function shineAll(e) {
			e.stop();
			
			logoImages.each(
										 function(el, index) {
											 shineImage(el, e);
										 });
			
		}
		
		
});