/**
 * @author syndicat
 */

/* Object-extensions from MooTools */

Object.extend(Element, {
	setWidth: function(element,w) {
		$(element).style.width = w +"px";
	},
	setHeight: function(element,h) {
		$(element).style.height = h +"px";
	},
	setTop: function(element,t) {
		$(element).style.top = t +"px";
	},
	setLeft: function(element,l) {
		$(element).style.left = l +"px";
	},
	setSrc: function(element,src) {
 		$(element).src = src; 
	},
	setHref: function(element,href) {
 		$(element).href = href; 
	},
	setInnerHTML: function(element,content) {
		$(element).innerHTML = content;
	}
});

/* ------------------------------------------------ */

var ExtendedLightbox = Class.create();

ExtendedLightbox.prototype = {
	/* there can only be one ExtendedLightbox instance
	 * it is created when calling initLightBox() :: see bottom of this script 
	 */
	instanceName: 	'myLightbox', 	
	
	/* variables that will be used to retrieve data from the database */
	contentType: 	null, 
	projectId: 		null, 
	
	/* prepared variables later to be assigned a value */
	srcArray: 		new Array(),
	activeImage: 	null,
	activeTabs: 	new Array(),
	// might be better if tab-titles came in srcArray from db
	tabs: 			new Object({
						img:'beelden van het ontwerp',
						flv:'videomateriaal',
						photo:'actiefoto\'s'
					}),
	
	/* configuration values of the lightbox */
	startDimension: new Object({
						'width': 	250, 
						'height': 	250
					}),
					
	overlayOpacity: 0.8,
	animate: 		true,
	/**
	 * @todo:implement autoPlay and fix controversy in loopImages/loopTabs
	 */
	autoPlay: 		false,
	loopTabs: 		true,
	loopImages: 	true,
	resizeSpeed: 	9,
	borderSize: 	10,
	fileLoadingImage: "loading.gif",
	fileBottomNavCloseImage: "closelabel.gif",
	imagesRoot: '/img/',

	/* ------------------------------------------------ */
	
	initialize: function(imagesRoot){
		this.imagesRoot = imagesRoot;
		this.configure();
		this.createLightboxElement();
	},

	loadProject: function(project, contentType){
		this.contentType = contentType;
		this.projectId = project;
		ARRM.jsonRequest({type: 'Request', method: 'retrieveProjectPortfolio', returnType: 'myLightbox', returnMethod: 'start', projectId: this.projectId});
	},
	
	start: function(obj){

		this.srcArray = obj.srcArray;
		
		if (!this.srcArray[this.contentType].parameters.length){
			//alert('geen '+this.tabs[this.contentType]);
			this.end();
			return;
		}
		hideSelectBoxes();
		hideFlash();
		
		var arrayPageSize = getPageSize();
		Element.setWidth('overlay', arrayPageSize[0]);
		Element.setHeight('overlay', arrayPageSize[1]);

		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: this.overlayOpacity });
		
		var arrayPageScroll = getPageScroll();
		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
		var lightboxLeft = arrayPageScroll[0];
		
		Element.setTop('lightbox', lightboxTop);
		Element.setLeft('lightbox', lightboxLeft);
		Element.show('lightbox');
		
		this.injectNavigation();
		this.changeImage(0);
	},

	injectNavigation: function(){
		this.activeTabs = new Array();
		for (var n in this.srcArray) {
			if (this.srcArray[n].parameters.length && this.tabs[n] && $(n+'Tab')) {
				this.activeTabs.push(n);
				if (n == this.contentType) {
					$(n+'Tab').innerHTML = "<span class=\"LightboxTabActive\">"+this.tabs[n]+"</span>\n";		
				}else{
					$(n+'Tab').innerHTML = "<span class=\"LightboxTab\"><a href=\"#\" onclick=\""+this.instanceName+".selectTab('"+n+"');return false;\">"+this.tabs[n]+"</a></span>\n";
				}
			}
		}
	},
	
	selectTab: function(contentType, imgIndex){
		this.contentType = contentType;
		this.injectNavigation();
		if (!isNaN(imgIndex)) {
			imgIndex = (imgIndex+this.srcArray[this.contentType].parameters.length)%this.srcArray[this.contentType].parameters.length;
		}else{
			imgIndex = 0;
		}
		this.changeImage(imgIndex);
	},

	nextTab: function(){
		if (this.activeTabs.length>1) {
			for (var i=0,x=1; i<this.activeTabs.length; i++,x++) {
				if (this.activeTabs[i] == this.contentType) break;
			}
			if (x < this.activeTabs.length) {
				this.selectTab(this.activeTabs[x], 0);
			} else if (x == this.activeTabs.length && this.loopTabs == true){
				this.selectTab(this.activeTabs[0], 0);
			} else {
				// do nothing, or end lightbox?
				//this.end();
			}
		}
	},
	
	prevTab: function(){
		var l = this.activeTabs.length;
		if (l>1) {
			for (var i=l,x=(l-1); i>0; i--,x--) {
				if (this.activeTabs[i] == this.contentType) break;
			}
			if (x >= 0) {
				this.selectTab(this.activeTabs[x], -1);
			} else if (x < 0 && this.loopTabs == true){
				this.selectTab(this.activeTabs[l-1], -1);
			} else {
				// do nothing, or end lightbox?
				//this.end();
			}
		}
	},
	
	nextImage: function() {
		if ((this.activeImage+1) == this.srcArray[this.contentType].parameters.length){
			if (this.loopTabs == true && this.activeTabs.length>1) {
				this.nextTab();
				return;
			}
			if (this.loopImages==false) {
				return;
			}
		}
		this.changeImage((this.srcArray[this.contentType].parameters.length+this.activeImage+1)%this.srcArray[this.contentType].parameters.length);
	},

	prevImage: function() {
		if ((this.activeImage-1) < 0){
			if (this.loopTabs == true && this.activeTabs.length>1) {
				this.prevTab();
				return;
			}
			if (this.loopImages==false) {
				return;
			}
		}
		this.changeImage((this.srcArray[this.contentType].parameters.length+this.activeImage-1)%this.srcArray[this.contentType].parameters.length);
	},


	changeImage: function(nr) {
		
		$('hoverNav').hide();
		$('prevLink').hide();
		$('nextLink').hide();

		if (this.contentType == 'flv') {
			$('lightboxImageMask').innerHTML= '<img id="lightboxImage" src="" />';
			//writeFlash('lightboxImage',291,217);
			$('loading').hide();
			$('lightboxImageMask').show();
			$('imageDataContainer').show();
			$('numberDisplay').show();			
		} else {
			$('lightboxImageMask').innerHTML= '<img id="lightboxImage" src="" />';
			$('loading').show();
			$('lightboxImageMask').hide();
			$('imageDataContainer').hide();
			$('numberDisplay').hide();			
		}

		this.activeImage = nr;
		imgPreloader = new Image();
		imgPreloader.onload	= function(){
			Element.setSrc('lightboxImage', this.src);
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			imgPreloader.onload	= function(){};
		}
		imgPreloader.src = this.srcArray[this.contentType].parameters[this.activeImage].src;
	},

	resizeImageContainer: function(imgWidth, imgHeight) {

		// get curren width and height
		this.widthCurrent = $('outerImageContainer').getWidth();
		this.widthTCurrent = Element.getWidth('lightboxTabs');
		if (this.widthTCurrent != this.widthCurrent){
			Element.setWidth('lightboxTabs', this.widthCurrent);
			this.widthTCurrent = Element.getWidth('lightboxTabs');
		}
		this.heightCurrent = Element.getHeight('outerImageContainer');

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

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

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

		if(!( hDiff == 0)){ 
			new Effect.Scale('outerImageContainer', this.yScale, {scaleX:false, duration: resizeDuration, queue: 'front'});
		}
		if(!( wDiff == 0)){ 
			new Effect.Scale('outerImageContainer', this.xScale, {scaleY:false, delay: resizeDuration, duration: resizeDuration});
		}
		if(!( wTDiff == 0)){ 
			new Effect.Scale('lightboxTabs', this.xTScale, {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);} 
		}

		Element.setHeight('prevLink', imgHeight);
		Element.setHeight('nextLink', imgHeight);
		Element.setWidth( 'imageDataContainer', widthNew);

		this.showImage();
		
	},


	showImage: function(){
		Element.hide('loading');
		var localHook = this;
		new Effect.Appear('lightboxImageMask', { duration: resizeDuration, queue: 'end', afterFinish: function(){ localHook.updateDetails(); } });
		this.preloadNeighborImages();
	},


	updateDetails: function() {
		Element.show('caption');
		Element.setInnerHTML( 'caption', this.srcArray[this.contentType].parameters[this.activeImage].description);
		Element.show('numberDisplay');
		Element.setInnerHTML( 'numberDisplay', "Afbeelding " + eval(this.activeImage + 1) + " van de " + this.srcArray[this.contentType].parameters.length);

		var localHook = this;
		new Effect.Parallel (
			[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 
			  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ], 
			{ duration: resizeDuration, afterFinish: function() {
				var arrayPageSize = getPageSize();
				Element.setHeight('overlay', arrayPageSize[1]);
				localHook.updateNav();
				}
			} 	
		);
	},

	updateNav: function() {
		var localHook = this;
		$('hoverNav').show();
		// somehow show/hide does not work as expected on these elements in IE
//		if(this.activeImage != 0){
			$('prevLink').show();
			$('prevLink').onclick = function() {
				localHook.prevImage();
				return false;
			}
/*		}else{
			$('prevLink').hide();
		}
		if(this.activeImage != (this.srcArray[this.contentType].parameters.length - 1)){
*/			$('nextLink').show();
			$('nextLink').onclick = function() {
				localHook.nextImage();
				return false;
			}
/*		}else{
			$('nextLink').hide();
		}
*/		this.enableKeyboardNav();
	},

	enableKeyboardNav: function() {
		var localHook = this;
		document.onkeydown = function (e) {
			if (e == null) { // ie
				keycode = event.keyCode;
				escapeKey = 27;
			} else { // mozilla
				keycode = e.keyCode;
				escapeKey = e.DOM_VK_ESCAPE;
			}
	
			key = String.fromCharCode(keycode).toLowerCase();
			if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){
				localHook.end();
			} else if((key == 'p') || (keycode == 37)){
				localHook.disableKeyboardNav();
				localHook.prevImage();
			} else if((key == 'n') || (keycode == 39)){
				localHook.disableKeyboardNav();
				localHook.nextImage();
			} else if((key == 't') || (keycode == 43)){
				localHook.disableKeyboardNav();
				localHook.nextTab();
			} else if((key == 'r') || (keycode == 41)){
				localHook.disableKeyboardNav();
				localHook.prevTab();
			}
		}; 
	},


	disableKeyboardNav: function() {
		document.onkeydown = function(){return};
	},

	preloadNeighborImages: function(){

		if((this.srcArray[this.contentType].parameters.length - 1) > this.activeImage){
			preloadNextImage = new Image();
			preloadNextImage.src = this.srcArray[this.contentType].parameters[this.activeImage + 1].src;
		}
		if(this.activeImage > 0){
			preloadPrevImage = new Image();
			preloadPrevImage.src = this.srcArray[this.contentType].parameters[this.activeImage - 1].src;
		}
	
	},

	end: function() {
		this.disableKeyboardNav();
		Element.hide('lightbox');
		new Effect.Fade('overlay', { duration: overlayDuration});
		showSelectBoxes();
		showFlash();
	}, 
	
	configure: function(){
		if(this.animate == true){
			overlayDuration=0.2;
			if(this.resizeSpeed>10){this.resizeSpeed=10}
			if(this.resizeSpeed<1){this.resizeSpeed=1}
			resizeDuration=(11-this.resizeSpeed)*0.15;
		} else { 
			overlayDuration=0;
			resizeDuration=0;
		}
	},
	
	createLightboxElement: function(){
		
		//create overlay-element on body
		var objBody = document.getElementsByTagName("body").item(0);
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); }
		objBody.appendChild(objOverlay);
		
		//create lightbox-element on body
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function(event){
			if (event && event.target){
				var eventSrcEl = event.target;
			}else if (event && event.srcElement){
				var eventSrcEl = event.srcElement;
			}
			if (eventSrcEl && eventSrcEl.id == 'lightbox'){
				myLightbox.end();
			}
		}
		objBody.appendChild(objLightbox);
		
		// create tabs-container on lightbox-element
		var objLightboxTabs = document.createElement("div");
		objLightboxTabs.setAttribute('id','lightboxTabs');
		objLightbox.appendChild(objLightboxTabs);
		
		// create tabs as configured in this.tabs
		for (var n in this.tabs) {
			var objLightboxTab = document.createElement("span");
			objLightboxTab.setAttribute('id',n+'Tab');
			objLightboxTabs.appendChild(objLightboxTab);
		}
		
		// create image/data-element on lightbox-element
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		Element.setWidth('outerImageContainer', this.startDimension.width);
		Element.setHeight('outerImageContainer', this.startDimension.height);			
		
		// create image-element on image/data-element
		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
		
		// create image-mask-element on image-element
		var objLightboxImageMask = document.createElement("div");
		objLightboxImageMask.setAttribute('id','lightboxImageMask');
		objImageContainer.appendChild(objLightboxImageMask);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objLightboxImageMask.appendChild(objLightboxImage);
		
		// create next/previous navigation on image-element
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
		
		// create preload-animation-element on image-element
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', this.imagesRoot+this.fileLoadingImage);
		objLoadingLink.appendChild(objLoadingImage);
		
		// create data-element on image/data-element
		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		// create close-navigation-element on data-element
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
	
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', this.imagesRoot+this.fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
	}
}

/* ------------------------------------------------ */

function getPageScroll(){
	var xScroll, yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;	
	}
	arrayPageScroll = new Array(xScroll,yScroll) 
	return arrayPageScroll;
}


function getPageSize(){
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

function showSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

function hideSelectBoxes(){
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}

function showFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i < flashObjects.length; i++) {
		flashObjects[i].style.visibility = "visible";
	}

	var flashEmbeds = document.getElementsByTagName("embed");
	for (i = 0; i < flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "visible";
	}
}

function hideFlash(){
	var flashObjects = document.getElementsByTagName("object");
	for (i = 0; i < flashObjects.length; i++) {
		flashObjects[i].style.visibility = "hidden";
	}

	var flashEmbeds = document.getElementsByTagName("embed");
	for (i = 0; i < flashEmbeds.length; i++) {
		flashEmbeds[i].style.visibility = "hidden";
	}
}

function pause(ms){
	var date = new Date();
	curDate = null;
	do{var curDate = new Date();}
	while( curDate - date < ms);
}

function initLightbox(imagesRoot){
	myLightbox=new ExtendedLightbox(imagesRoot);
}
//alert('ExtendedLightbox loaded');