// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "/images/lightbox/loading.gif";		
var fileBottomNavCloseImage = "/images/lightbox/close.gif";

var overlayOpacity = 0.2;	// controls transparency of shadow overlay

var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;

overlayDuration = 0;
resizeDuration = 0;



// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var FrontAdv = Class.create();

FrontAdv.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		
		// Code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="advoverlay"></div>
		//	<div id="advbox">
		//		<div id="outerAdvContainer">
		//			<div id="closeAdv">
		//				<a href="#" id="closeLink">
		//					<img src="images/close.gif">
		//				</a>
		//			</div>
		//			<div id="advContainer">
		//				<a href="#" id="advLink">
		//				    <img id="advImage">
		//				</a>
		//				<div id="loadingAdv">
		//					<a href="#" id="loadingLink">
		//						<img src="images/loading.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//	</div>


		var objBody = document.getElementsByTagName("body").item(0);

		var objAdvOverlay = document.createElement("div");
		objAdvOverlay.setAttribute('id','advoverlay');
		objAdvOverlay.style.display = 'none';
		objAdvOverlay.onclick = function() { myFrontAdv.end(); }
		objBody.appendChild(objAdvOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','advbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'advbox') {
				myFrontAdv.end();
			}
		};
		objBody.appendChild(objLightbox);

		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerAdvContainer');
		objLightbox.appendChild(objOuterImageContainer);

		Element.setWidth('outerAdvContainer', 250);
		Element.setHeight('outerAdvContainer', 250);			

		var objCloseAdv = document.createElement("div");
		objCloseAdv.setAttribute('id','closeAdv');
		objCloseAdv.onclick = function() { myFrontAdv.end(); };
		objOuterImageContainer.appendChild(objCloseAdv);

		var objCloseLink = document.createElement("a");
		objCloseLink.setAttribute('id','closeLink');
		objCloseLink.setAttribute('href','#');
		objCloseAdv.appendChild(objCloseLink);
		
		var objCloseImage = document.createElement("img");
		objCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objCloseLink.appendChild(objCloseImage);

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','advContainer');
		objOuterImageContainer.appendChild(objImageContainer);
	
		var objAdvLink = document.createElement("a");
		objAdvLink.setAttribute('id','advLink');
		objAdvLink.setAttribute('href','http://www.pips.pl/pl/salon_obuwia_dokumenty_zgloszeniowe/');
		objImageContainer.appendChild(objAdvLink);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','advImage');
		objAdvLink.appendChild(objLightboxImage);
	
/*		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
*/	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loadingAdv');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myFrontAdv.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', fileLoadingImage);
		objLoadingLink.appendChild(objLoadingImage);
	},


	
	//
	//	start()
	//	Display overlay and advbox. If image is part of a set, add siblings to imageArray.
	//
	//start: function(imageLink) {	
	start: function(image) {	
		hideSelectBoxes();
		hideFlash();

		// stretch overlay to fill page and fade in

		if (!document.getElementsByTagName){ return; }

		//wyswietl
		var arrayPageSize = getPageSize();
		Element.setWidth('advoverlay', arrayPageSize[0]);
		Element.setHeight('advoverlay', arrayPageSize[1]);

		new Effect.Appear('advoverlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });				

		//isAdvToDisplay = 1;
		var arrayPageScroll = getPageScroll();
		var advboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
		var advboxLeft = arrayPageScroll[0];
			
		Element.setTop('advbox', advboxTop);
		Element.setLeft('advbox', advboxLeft);
		//.Element.setTop('advbox', 0);
		//Element.setLeft('advbox', 0);

		Element.show('advbox');

		var imageSrc = String(image.getAttribute('src'));
		this.prepareAdvImage(imageSrc);
	},

	//
	//	prepareAdvImage()
	//	
	//
	prepareAdvImage: function(advImageSrc) {	
		
		// hide elements during transition
		Element.show('loadingAdv');
		Element.hide('advImage');
//		Element.hide('hoverNav');
//		Element.hide('prevLink');
		Element.hide('closeAdv');
//		Element.hide('imageDataContainer');
//		Element.hide('numberDisplay');		

		imgPreloader = new Image();

		// once image is preloaded, resize image container
		imgPreloader.onload=function(){
			Element.setSrc('advImage', advImageSrc);
			myFrontAdv.resizeAdvContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}
		imgPreloader.src = advImageSrc;
	},

	//
	//	resizeImageContainer()
	//
	resizeAdvContainer: function( imgWidth, imgHeight) {

		// get curren width and height
		this.widthCurrent = Element.getWidth('outerAdvContainer');
		this.heightCurrent = Element.getHeight('outerAdvContainer');

		// get new width and height
		var widthNew = (imgWidth  + (borderSize * 2));
		var heightNew = (imgHeight  + (borderSize * 2)) + 30;

		// scalars based on change from old to new
		this.xScale = ( widthNew / this.widthCurrent) * 100;
		this.yScale = ( heightNew / this.heightCurrent) * 100;

		// calculate size difference between new and old image, and resize if necessary
		wDiff = this.widthCurrent - widthNew;
		hDiff = this.heightCurrent - heightNew;

		if(!( hDiff == 0)){ new Effect.Scale('outerAdvContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
		if(!( wDiff == 0)){ new Effect.Scale('outerAdvContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

		// if new and old image are same size and no scaling transition is necessary, 
		// do a quick pause to prevent image flicker.
		if((hDiff == 0) && (wDiff == 0)){
			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
		}

		this.showAdv();
	},
	
	//
	//	showAdv()
	//	Display image and begin preloading neighbors.
	//
	showAdv: function(){
		Element.hide('loadingAdv');
		Element.show('advImage');		
		Element.show('closeAdv');
	},

	//
	//	end()
	//
	end: function() {
		//this.disableKeyboardNav();
		Element.hide('closeAdv');
		Element.hide('advbox');
		Element.hide('advoverlay');
		//new Effect.Fade('advoverlay', { duration: overlayDuration});
		showSelectBoxes();
		showFlash();
	}
}

// -----------------------------------------------------------------------------------

function initFrontAdv() { 
	
	var images = document.getElementsByTagName('img');

	// loop through all div tags
	for (var i=0; i<images.length; i++)	{
		var image = images[i];
			
		var relAttribute = String(image.getAttribute('id'));
			
		// use the string.match() method to catch 'advbox' references in the rel attribute
		if ( relAttribute.match('advBody')) {
			myFrontAdv = new FrontAdv(); 
			myFrontAdv.start(image);
			return false;	
		}
	}
}
Event.observe(window, 'load', initFrontAdv, false);