﻿// -----------------------------------------------------------------------------------
//
//	Lightbox Class Declaration
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();
Lightbox.fileLoadingImage = "./@images/loading.gif";		
Lightbox.fileBottomNavCloseImage = "./@images/exit.gif";
Lightbox.filePrevLinkHtml = "<img src='./@images/preb.gif' border='0'/>";
Lightbox.fileNextLinkHtml = "<img src='./@images/nextb.gif' border='0'/>";
// -----------------------------------------------------------------------------------

Lightbox.prototype = {	
	resizeSpeed : 7,	// controls the speed of the image resizing (1:slowest and 10:fastest)
	borderSize : 10,	//if you adjust the padding in the CSS, you will need to update this variable
	activeWord:0,
	resizeDuration:0,
	wordsArray:[],
	
	initialize: function(jsObj) {	
		var _this=this;
		if(this.resizeSpeed > 10){ this.resizeSpeed = 10;}
		if(this.resizeSpeed < 1){ this.resizeSpeed = 1;}
		this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
		
		var boxClassName = EvalUtil.isSingle?"iflybox":"iflybox2";
		$$('div.'+boxClassName).each(function(element){
			element.onclick=function(event){
                EvalUtil.boxClick(this);
				//_this.start(this);
				return false;
			}
			element = null;
		});
		
		if(!$('overlay'))
			Lightbox.initDom();	
	},
	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(elem) {	
		var _this=this;	
		$('overlay').onclick=Lightbox.end;		
		Lightbox.showOverlay();
			
		_this.wordsArray=[];
		var wordsNum = 0;
	
		var boxClassName = EvalUtil.isSingle?"iflybox":"iflybox2";
		$$('div.'+boxClassName).each(function(element){
			_this.wordsArray.push(parseInt(element.getAttribute('id').substr(3)));
			element = null;
		});
		while(_this.wordsArray[wordsNum]!= parseInt(elem.getAttribute('id').substr(3))) { wordsNum++;}
		
		// calculate top offset for the lightbox and display 
		var arrayPageSize = LightboxUtil.getPageSize();
		var arrayPageScroll = LightboxUtil.getPageScroll();
		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
		var lightboxLeft = (arrayPageSize[2] -400)/2;

		var word_detail = $('word_detail');
		word_detail.style.top=lightboxTop+'px';
		word_detail.style.left=lightboxLeft+'px';
		if($('dvClose') && (!($('dvClose').onclick)))
			$('dvClose').onclick=function() { word_detail.style.display='none';Lightbox.end(); return false; }
			
		_this.changeView(wordsNum);
	},

	//
	//	changeView()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeView: function(wordsNum) {
		var _this=this;	
	 	_this.activeWord=wordsNum;
		if(_this.activeWord == 0)$('pLink').style.visibility = "hidden";
		if(_this.activeWord == (_this.wordsArray.length - 1))$('nLink').style.visibility = "hidden";
	   new Effect.Appear('word_detail', { duration: 0.5,from:0,to:1.0, queue: 'end', afterFinish: function(){	_this.updateNav(wordsNum); } });	   
	},

	updateNav: function(wordsNum) {
	    if(EvalUtil)
		   EvalUtil.custBoxCtrlInfo(wordsNum);
	    var _this=this;  
		if(_this.activeWord != 0){
			//Element.show('pLink');
			$('pLink').style.visibility = "visible"
			document.getElementById('pLink').onclick = function() {
				_this.changeView(_this.activeWord - 1); return false;
			}
		}

		// if not last object in set, display next button
		if(_this.activeWord != (_this.wordsArray.length - 1)){
			//Element.show('nLink');
			$('nLink').style.visibility = "visible"
			document.getElementById('nLink').onclick = function() {
				_this.changeView(_this.activeWord + 1); return false;
			}
		}
		this.enableKeyboardNav();
	},

	enableKeyboardNav: function() {
		var _this=this;
		document.onkeydown = function(e){
			_this.keyboardAction(e);
		} 
	},

	keyboardAction: function(e) {
		if (e == null) { // ie
			keycode = event.keyCode;
		} else { // mozilla
			keycode = e.which;
		}
		var isPrev=((keycode==38)||(keycode==37)||(keycode==33));
		var isNext=((keycode==40)||(keycode==34)||(keycode==39));
		var isClose=((keycode==13)||(keycode==27));

		key = String.fromCharCode(keycode).toLowerCase();
		
		if(isClose||(key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
			$('overlay').click();//Lightbox.end();
		} else if(isPrev||(key == 'p')){	// display previous image
			if(this.activeWord != 0){
				Lightbox.disableKeyboardNav();
				this.changeView(this.activeWord - 1);
			}
		} else if(isNext||(key == 'n')){	// display next image
			if(this.activeWord != (this.wordsArray.length - 1)){
				Lightbox.disableKeyboardNav();
				this.changeView(this.activeWord + 1);
			}
		}
	}
}

Lightbox.initDom=function(){
	var objBody = document.getElementsByTagName("body").item(0);
	
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.style.display = 'none';
	//objOverlay.onclick = function() { Lightbox.end(); return false; }		
	objBody.appendChild(objOverlay);
	
	var objLightbox = document.createElement("div");
	objLightbox.setAttribute('id','lightbox');
	objLightbox.style.display = 'none';
	objBody.appendChild(objLightbox);

	var objOuterImageContainer = document.createElement("div");
	objOuterImageContainer.setAttribute('id','outerImageContainer');
	objLightbox.appendChild(objOuterImageContainer);

	var objImageContainer = document.createElement("div");
	objImageContainer.setAttribute('id','imageContainer');
	objOuterImageContainer.appendChild(objImageContainer);

	var objLightboxImage = document.createElement("div");//img
	objLightboxImage.setAttribute('id','lightboxImage');
	objLightboxImage.style.textAlign='center';		
	var table='';
	objLightboxImage.innerHTML=table;
	objImageContainer.appendChild(objLightboxImage);		

	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);

	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() { Lightbox.end(); return false; }
	objLoading.appendChild(objLoadingLink);

	var objLoadingImage = document.createElement("img");
	objLoadingImage.setAttribute('src',Lightbox.fileLoadingImage);
	objLoadingLink.appendChild(objLoadingImage);

	var objImageDataContainer = document.createElement("div");
	objImageDataContainer.setAttribute('id','imageDataContainer');
	objImageDataContainer.className = 'clearfix';
	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);
	
	var objBottomNav = document.createElement("div");
	objBottomNav.setAttribute('id','bottomNav');
	objImageData.appendChild(objBottomNav);
	
	var objprevWordLink = document.createElement("a");
	objprevWordLink.setAttribute('id','prevWordLink');
	objprevWordLink.setAttribute('href','#');
	objprevWordLink.innerHTML=Lightbox.filePrevLinkHtml;		
	objBottomNav.appendChild(objprevWordLink);
	
	var objnextWordLink = document.createElement("a");
	objnextWordLink.setAttribute('id','nextWordLink');
	objnextWordLink.setAttribute('href','#');
	objnextWordLink.innerHTML=Lightbox.fileNextLinkHtml;		
	objBottomNav.appendChild(objnextWordLink);

	var objBottomNavCloseLink = document.createElement("a");
	objBottomNavCloseLink.setAttribute('id','bottomNavClose');
	objBottomNavCloseLink.setAttribute('href','#');
	objBottomNavCloseLink.onclick = function() { Lightbox.end(); return false; }
	objBottomNav.appendChild(objBottomNavCloseLink);

	var objBottomNavCloseImage = document.createElement("img");
	objBottomNavCloseImage.setAttribute('src', Lightbox.fileBottomNavCloseImage);
	objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
	objBottomNavCloseLink = null;
}

Lightbox.disableKeyboardNav=function(){
	document.onkeydown = '';
}

Lightbox.end=function(){
    $('overlay').onclick=null;
	if(EvalUtil)
	{
	    EvalUtil.stop();
	    EvalUtil.curPlayer.pause();
	}
	Lightbox.disableKeyboardNav();		
	Element.hide('word_detail');
	new Effect.Fade('overlay', { duration: 0.2});
	LightboxUtil.showSelectBoxes();
}

Lightbox.showOverlay=function(){
	LightboxUtil.hideSelectBoxes();
	//stretch overlay to fill page and fade in
	var arrayPageSize = LightboxUtil.getPageSize();
	$('overlay').style.height =arrayPageSize[1]+'px';
	new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.6 });
	//Element.show('overlay');
}

Lightbox.utilShowHtml=function(template,closeId){
	if(!$('overlay'))
		Lightbox.initDom();
	Lightbox.pageLoading=false;
	var temp=template;
	var tempClose=closeId;
	if(arguments.length<2){
		if(!$('return')){
			var pr=document.createElement('div');
			pr.setAttribute('id','return');
			pr.style.display='none';		
			document.getElementsByTagName('body')[0].appendChild(pr);			
		}
		temp='return';
		$(temp).outerHTML=template;
		tempClose='closeReport';
	}
	//if(arguments.length>1){//self defined ele show
	if($(temp)){
		var pageSize=LightboxUtil.getPageSize();
		var pageScroll=LightboxUtil.getPageScroll();
		$(temp).style.left=parseInt(pageSize[2] / 4)+'px';
		$(temp).style.top=parseInt(pageScroll[1] + (pageSize[3] / 15))+'px';
		//$(temp).style.top=pageScroll[1] + (pageSize[3] / 15)+'px';//leak memory
		if($(tempClose) && (!($(tempClose).onclick))){
			if(!Lightbox.closeArr)Lightbox.closeArr=[];
			if(!(Lightbox.closeArr.include($(temp))))Lightbox.closeArr.push($(temp));
			$(tempClose).onclick=function(){//solve multi show box's conflict when close
				Lightbox.closeArr.each(function(cc){cc.style.display='none';});
				new Effect.Fade('overlay', { duration: 0.2});
				LightboxUtil.showSelectBoxes();
				return false;
			};
		}
	}//!(document.onkeydown)
	if(true){
	    document.onkeydown=function(e){
	        if (e == null) { // ie
			    keycode = event.keyCode;
		    } else { // mozilla
			    keycode = e.which;
		    }
		    var isClose=((keycode==13)||(keycode==27));
		    key = String.fromCharCode(keycode).toLowerCase();
		    if(isClose||(key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
			    $('overlay').click();
		    }
	        //document.onkeydown=null; szsheng Remove
	    };
	}
	if(!($('overlay').onclick)){
	    $('overlay').onclick=function(){
	        if(Lightbox.pageLoading)return;
	        $(tempClose).click();
	        document.onkeydown=null;//szsheng Add
	    };
	}
	Lightbox.showOverlay();
	Element.show(temp);
}

Lightbox.setLoading=function(isloading,str){
	if(isloading){
		if(!$('overlay'))
			Lightbox.initDom();
		if(!$('pageloading')){
			var pl=document.createElement('div');
			pl.setAttribute('id','pageloading');
			pl.style.display='none';
			document.getElementsByTagName('body')[0].appendChild(pl);
		}
		$('pageloading').innerHTML='';
		var img=document.createElement('img');
		img.setAttribute('src',Lightbox.fileLoadingImage);
		img.style.borderWidth='0px'
		$('pageloading').appendChild(img);
		$('pageloading').appendChild(document.createTextNode(str));
		Lightbox.showOverlay();
		//img.onload=function(){
		    Element.show('pageloading');
		    Lightbox.pageLoading=true;
		//}
	}
	else{
		Element.hide('pageloading');
		if(arguments.length<2){
		    new Effect.Fade('overlay', { duration: 0.2});
		    Lightbox.pageLoading=false;
		    LightboxUtil.showSelectBoxes();
		}
	}		
}

//Lightbox util class
var LightboxUtil={};
LightboxUtil.getPageScroll=function(){
	var yScroll;
	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}
	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
LightboxUtil.getPageSize=function(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		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
		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;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

// ---------------------------------------------------

LightboxUtil.showSelectBoxes=function(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
	var txtBox = $("index_textbox");
	if(txtBox)
	    txtBox.style.visibility = "visible";

	//if(!(Prototype.BrowserFeatures.XPath))
		//$('UserRecorder').style.visibility='visible';
}

// ---------------------------------------------------

LightboxUtil.hideSelectBoxes=function(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
	var txtBox = $("index_textbox");
	if(txtBox)
	    txtBox.style.visibility = "hidden";
}

// ---------------------------------------------------
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
LightboxUtil.pause=function(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}

LightboxUtil.getAbsolutePos = function(el){
 	var sl = 0, st = 0;	
	if (el.scrollLeft && el.scrollTop){
	  	sl = el.scrollLeft;
		st = el.scrollTop;
 	}
 	var r = { x: el.offsetLeft - sl, y: el.offsetTop - st };
 	if(el.offsetParent){
		var tmp = LightboxUtil.getAbsolutePos(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
 	return r;
};