// JavaScript Document
var globalMe = null;

function imagePopUpBox(width, height, imgArray){
	this.maxType = Array('default' , 'width', 'height', 'none','center');
	this.width = width;
	this.height = height;
	this.imageArray = imgArray;
	this.titleArray = new Array;
	this.currentImagePos = 0;
	this.showPreviousNext = true;
	this.showZoom = true;
	this.maxializePic = 'none';
	this.scrollable = true;
	
	this.overlayBgColor = '#444444';
	this.overlayOpacity = 0.8;
	this.popUpBgColor = '#ffffff';
	
	this.imageLoading = '/bin/jscript/imagebox/images/lightbox-ico-loading.gif';
	this.imageBtnPrev = '/bin/jscript/imagebox/images/toleft.gif';
	this.imageBtnNext = '/bin/jscript/imagebox/images/toright.gif';
	this.imageBtnClose = '/bin/jscript/imagebox/images/close.gif';
	this.imageBlank = '/bin/jscript/imagebox/images/lightbox-blank.gif';
	this.imageBtnZoomIn = '/bin/jscript/imagebox/images/zoomin.gif';
	this.imageBtnZoomOut = '/bin/jscript/imagebox/images/zoomout.gif';
	this.imageBtnResize = '/bin/jscript/imagebox/images/resize.gif';
	
	this.dragOn = true;
	this.border_left = 30;
	this.border_right = 30;
	this.border_top = 25;
	this.border_bottom = 25;
	this.horzontalBarLength = 0;
	this.verticalBarLength = 0;
	this.finishScript = '';

	//**************************************************************************************
	
	this.initial = __set_interface;
	this.showZoomBtn = __set_zoom;
	this.showNextBtn = __set_next;
	this.setMaxPic = __set_maxpic;
	this.setBorder = __set_border;
	this.setDrag = __set_drag;
	this.setScroll = __set_scrollable;
	this.setCurrentImage = __set_current_image;
	this.setTitle = __set_textArray;
	this.setFinishScript = _set_finishScript
	globalMe = this;
	return this;
}
function _set_finishScript(input){
	if (input.length > 0){
		this.finishScript = input;
	}	
}
function __set_textArray(input){
	this.titleArray = Array();
	for(var i = 0; i < input.length; i++){
		this.titleArray[this.titleArray.length] = input[i];
	}
}
function __set_scrollable(input){
	if (input)
		this.scrollable = true;
	else
		this.scrollable = false;
}
function __set_current_image(input){
	if (input > 0){
		this.currentImagePos = input;
	}
}
function __set_border(left,right,top,bottom){
	this.border_left = left;
	this.border_right = right;
	this.border_top = top;
	this.border_bottom = bottom;

	$('#imgpop-box').css({
		width:				this.width- this.border_left - this.border_right,
		height:				this.height- this.border_top - this.border_bottom,
		left:				this.border_left,
		top:				this.border_top,
		overflow:			'hidden'
	});
}
function __set_zoom(input){
	if (input)
		this.showZoom = true;
	else
		this.showZoom = false;
}
function __set_drag(input){
	if (input)
		this.dragOn = true;
	else
		this.dragOn = false;
}
function __set_next(input){
	if (input)
		this.showPreviousNext = true;
	else
		this.showPreviousNext = false;
}
function __set_maxpic(input){
	if (input >= 0 && input <= 4)
		this.maxializePic = this.maxType[input];
	if (input =='default' || input =='width' || input =='height' || input =='none' || input =='center'){
		this.maxializePic = input;
	}
}
function __set_interface(){
	$('embed, object, select','li').css({ 'visibility' : 'hidden' });
			
	$('body').append('<div id="imgpop-overlay"></div><div id="imgpop-imgbox"><div id="imgpop-loading"><img src="'+this.imageLoading+'"/></div><div id="imgpop-title">test</div><div id="imgpop-close"><img src="'+this.imageBtnClose+'" title="Close"/></div><div id="imgpop-prev"><img src="'+this.imageBtnPrev+'" title="Previous picture"/></div><div id="imgpop-next"><img src="'+this.imageBtnNext+'" title="Next picture"/></div><div id="imgpop-zoomin"><img src="'+this.imageBtnZoomIn+'" title="Zoom in"/></div><div id="imgpop-sliderhor"><div id="imgpop-handlehor"></div></div><div id="imgpop-sliderver"><div id="imgpop-handlever"></div></div><div id="imgpop-zoomout"><img src="'+this.imageBtnZoomOut+'" title="Zoom out"/></div><div id="imgpop-resize"><img src="'+this.imageBtnResize+'" title="Resize picture"/></div><div id="imgpop-box" ><div id="imgpop-mainimage-div"><img id="imgpop-mainimage" src=""></div></div></div>');	

	// Get page sizes
	var arrPageSizes = ___getPageSize();
	var arrPageScroll = ___getPageScroll();
	
	$('#imgpop-overlay').css({
		backgroundColor:	this.overlayBgColor,
		opacity:			this.overlayOpacity,
		height:				arrPageSizes[1],
		width:				arrPageSizes[0]
	}).fadeIn();
	
	$('#imgpop-imgbox').css({
		backgroundColor:	this.popUpBgColor,
		opacity:			1,
		width:				this.width,
		height:				this.height,
		top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
		left:	(arrPageSizes[0] - this.width) / 2
	});
	
	$('#imgpop-mainimage').css({
		position:		'absolute',
		left:			0,
		top:			0
	});

	if (this.scrollable){

		globalMe.horzontalBarLength = globalMe.width- globalMe.border_left - globalMe.border_right - $('#imgpop-handlehor').width();
		
		$('#imgpop-sliderhor').slider({
			min: 0,
			max: globalMe.horzontalBarLength,
			handle: '.handle',
			stop: function (event, ui) {	

			},
			slide: function (event, ui) {
				$('#imgpop-handlehor').css({
					left:				ui.value
				});

				var leftpos = ui.value / globalMe.horzontalBarLength *(globalMe.horzontalBarLength + $('#imgpop-handlehor').width() - $("#imgpop-mainimage").width());
				$("#imgpop-mainimage-div").css({
					left:				leftpos
			   });
			}
		});
		
		globalMe.verticalBarLength = globalMe.height- globalMe.border_top - globalMe.border_bottom - $('#imgpop-handlever').height();
		
		$('#imgpop-sliderver').slider({
			min: 0,
			max: globalMe.verticalBarLength,
			orientation: 'vertical',
			handle: '.handle',
			stop: function (event, ui) {	

			},
			slide: function (event, ui) {
				$('#imgpop-handlever').css({
					top:				globalMe.verticalBarLength - ui.value
				});

				var toppos = (globalMe.verticalBarLength - ui.value) / (globalMe.verticalBarLength) *(globalMe.verticalBarLength + $('#imgpop-handlever').height() - $("#imgpop-mainimage").height());
				$("#imgpop-mainimage-div").css({
					top:				toppos
			   });
			}
		});
		
		globalMe.border_bottom = globalMe.border_bottom + 10;
		globalMe.border_right = globalMe.border_right + 10;
	}else{
		$('#imgpop-handlehor').hide();
		$('#imgpop-sliderhor').hide();
		$('#imgpop-handlever').hide();
		$('#imgpop-sliderver').hide();
	}
	
	$('#imgpop-box').css({
		width:				this.width- this.border_left - this.border_right,
		height:				this.height- this.border_top - this.border_bottom,
		left:				this.border_left,
		top:				this.border_top,
		overflow:			'hidden'
	});
		
	$('#imgpop-handlehor').css({
		width:				20,
		height:				10,
		top:				0,
		left:				0,
		cursor: 			'pointer',
		position:			'absolute',
		zIndex: 			100,
		overflow:			'hidden'
	});
	$('#imgpop-sliderhor').css({
		width:				this.width- this.border_left - this.border_right,
		height:				10,
		left:				this.border_left,
		top:				this.height- this.border_bottom,
		position:			'absolute'
	});
	$('#imgpop-handlever').css({
		width:				10,
		height:				20,
		top:				0,
		left:				0,
		cursor: 			'pointer',
		position:			'absolute',
		zIndex: 			101,
		overflow:			'hidden'
	});
	$('#imgpop-sliderver').css({
		width:				10,
		height:				this.height- this.border_top - this.border_bottom,
		left:				this.width- this.border_right,
		top:				this.border_top,
		position:			'absolute'
	});

	$('#imgpop-loading').css({
		left:				this.width / 2,
		top:				this.height / 2
	});
	
	$('#imgpop-close').css({
		left:				this.width - 30,
		top:				5
	});
	
	$('#imgpop-zoomout').css({
		left:				this.width - 60,
		top:				5
	});
	
	$('#imgpop-zoomin').css({
		left:				this.width - 90,
		top:				5
	});
	
	$('#imgpop-title').css({
		overflow:			'auto',
		width:				this.width - this.border_left *2- this.border_right,
		height:				20,
		left:				this.border_left *2,
		top:				this.height - 24
	});
	if (this.titleArray.length == 0){
		$('#imgpop-title').hide();		
	}
	$('#imgpop-resize').css({
		left:				this.width - 150,
		top:				5
	});
	
	$('#imgpop-prev').css({
		left:				5,
		top:				this.height / 2
	});
	
	$('#imgpop-next').css({
		left:				this.width - 25,
		top:				this.height / 2
	});
	
	$('#imgpop-overlay,#imgpop-close').click(function() {
		_finish();									
	});
	
	$('#imgpop-next').click(function() {
		if (globalMe.currentImagePos == globalMe.imageArray.length - 1)
			globalMe.currentImagePos = 0;
		else
			globalMe.currentImagePos++;
		__set_start();							
	});
	
	$('#imgpop-prev').click(function() {
		if (globalMe.currentImagePos == 0)
			globalMe.currentImagePos = globalMe.imageArray.length - 1;
		else
			globalMe.currentImagePos--;
		__set_start();							
	});
	
	$('#imgpop-resize').click(function() {
		__set_start();		
	});
	
	$('#imgpop-zoomin').click(function() {
		zoomInFunc();
	});
	
	$('#imgpop-zoomout').click(function() {
		zoomOutFunc();
	});
	
	if (! this.showPreviousNext){
		$('#imgpop-prev').hide();
		$('#imgpop-next').hide();
	}
	if (! this.showZoom){
		$('#imgpop-zoomin').hide();
		$('#imgpop-zoomout').hide();
	}
	$(window).resize(function() {
		// Get page sizes
		var arrPageSizes = ___getPageSize();
		// Get page scroll
		var arrPageScroll = ___getPageScroll();
		
		// Style overlay and show it
		var overlayheight = arrPageSizes[1];
		if (arrPageScroll[1] + (arrPageSizes[3] / 10) * 2 + globalMe.height > arrPageSizes[1])
			overlayheight = arrPageScroll[1] + (arrPageSizes[3] / 10) * 2 + globalMe.height;
		$('#imgpop-overlay').css({
			width:		arrPageSizes[0],
			height:		overlayheight
		});
		
		// Calculate top and left offset for the jquery-lightbox div object and show it
		$('#imgpop-imgbox').css({
			top:	arrPageScroll[1] + (arrPageSizes[3] / 10),
			left:	(arrPageSizes[0] - globalMe.width ) / 2
		});
	});
	
	__set_start();
}

function zoomInFunc(){
	var _w = $("#imgpop-mainimage").width() * 2;
	var _h = $("#imgpop-mainimage").height() * 2;
	if (_w > 10 && _h > 10){
		$('#imgpop-mainimage').css({
			width:				_w,
			height:				_h
		});
		$('#imgpop-mainimage-div').css({
			width:				_w,
			height:				_h
		});
	}
	__dragOn();
	__setImgPosIfNeed();
}
function zoomOutFunc(){
	var _w = $("#imgpop-mainimage").width() / 2;
	var _h = $("#imgpop-mainimage").height() / 2;
	if (_w > 10 && _h > 10){
		$('#imgpop-mainimage').css({
			width:				_w,
			height:				_h
		});
		$('#imgpop-mainimage-div').css({
			width:				_w,
			height:				_h
		});
	}	
	__dragOn();
	__setImgPosIfNeed();
}
function __setImgPosIfNeed(){
	/*if ($('#imgpop-mainimage-div').offset().left < 0){
		$('#imgpop-mainimage-div').css({
			left:				0
		});
	}
	if ($('#imgpop-mainimage-div').offset().top < 0){
		$('#imgpop-mainimage-div').css({
			top:				0
		});
	}*/
	$('#imgpop-mainimage-div').css({
		left:	(globalMe.width - $('#imgpop-mainimage-div').width()) / 2,
		top:	(globalMe.height- $('#imgpop-mainimage-div').height()) / 2
	});		
	

}
function __set_start(){
	$('#imgpop-loading').show();
	$('#imgpop-mainimage').hide();
	
	var objImagePreloader = new Image();
	objImagePreloader.onload = function() {
		$('#imgpop-mainimage').attr('src',globalMe.imageArray[globalMe.currentImagePos]);
		objImagePreloader.onload=function(){};
		$('#imgpop-loading').hide();
		$('#imgpop-mainimage').show();

		if (globalMe.maxializePic == 'none' || globalMe.maxializePic == 'center'){
			// resize the picture to normal
			$('#imgpop-mainimage').css({
				width:				objImagePreloader.width,
				height:				objImagePreloader.height
			});	
		}else if (globalMe.maxializePic == 'width'){
			$('#imgpop-mainimage').css({
					width:				globalMe.width-globalMe.border_left-globalMe.border_right ,
					height:				objImagePreloader.height / objImagePreloader.width * (globalMe.width-globalMe.border_left-globalMe.border_right)
				});	
		}else if (globalMe.maxializePic == 'height'){
			$('#imgpop-mainimage').css({
					width:				objImagePreloader.width / objImagePreloader.height * (globalMe.height-globalMe.border_top-globalMe.border_bottom),
					height:				globalMe.height-globalMe.border_top-globalMe.border_bottom
				});	
		}else{
			if (objImagePreloader.width / (globalMe.width-globalMe.border_left-globalMe.border_right) > objImagePreloader.height / (globalMe.height-globalMe.border_top-globalMe.border_bottom) ){
				$('#imgpop-mainimage').css({
					width:				globalMe.width-globalMe.border_left-globalMe.border_right ,
					height:				objImagePreloader.height / objImagePreloader.width * (globalMe.width-globalMe.border_left-globalMe.border_right)
				});	
			}else{
				$('#imgpop-mainimage').css({
					width:				objImagePreloader.width / objImagePreloader.height * (globalMe.height-globalMe.border_top-globalMe.border_bottom),
					height:				globalMe.height-globalMe.border_top-globalMe.border_bottom
				});	
			}			
		}
		// resize & re-location the image
		if (globalMe.maxializePic == 'center'){
			var _temptop = 0;
			var _templeft = 0;
			if (objImagePreloader.width < globalMe.width-globalMe.border_left-globalMe.border_right){
				_templeft = (globalMe.width-globalMe.border_left-globalMe.border_right-objImagePreloader.width)/2;
			}
			if (objImagePreloader.height < globalMe.height-globalMe.border_top-globalMe.border_bottom){
				_temptop = (globalMe.height-globalMe.border_top-globalMe.border_bottom-objImagePreloader.height)/2;
			}
			$('#imgpop-mainimage-div').css({
				left:				_templeft,
				top:				_temptop
			});
		}else{
			$('#imgpop-mainimage-div').css({
				left:				0,
				top:				0
			});
		}
		zoomOutFunc();
		zoomInFunc();
		__dragOn();
	}
	objImagePreloader.src = globalMe.imageArray[globalMe.currentImagePos];
	
	$('#imgpop-title').text(globalMe.titleArray[globalMe.currentImagePos]);
}
function __dragOn(){
	if(globalMe.dragOn){
		$("#imgpop-mainimage-div").draggable( 'destroy' );
		//$("#imgpop-mainimage-div").draggable({ containment: "#imgpop-box", scroll: true });
		var arrPageSizes = ___getPageSize();
		var arrPageScroll = ___getPageScroll();
		var hh = arrPageScroll[1] + (arrPageSizes[3] / 10) + globalMe.border_top ;
		var ll = (arrPageSizes[0] - globalMe.width ) / 2 + globalMe.border_left;
		var ll2 =ll +globalMe.width- $("#imgpop-mainimage-div").width()-globalMe.border_left * 2;
		var hh2 = hh +globalMe.height- $("#imgpop-mainimage-div").height()-globalMe.border_top * 2;

		if (ll < 0 || ll2 < 0){
			ll2 = (arrPageSizes[0] - globalMe.width ) / 2 + globalMe.border_left;
			ll = ll2 +globalMe.width- $("#imgpop-mainimage-div").width()-globalMe.border_left * 2;
		}
		if (hh < 0 || hh2 < 0){
			hh2 = arrPageScroll[1] + (arrPageSizes[3] / 10) + globalMe.border_top ;
			hh = hh2 +globalMe.height- $("#imgpop-mainimage-div").height()-globalMe.border_top * 2;
		}
		$("#imgpop-mainimage-div").draggable({
				containment: [ll , hh, ll2 , hh2],
				drag: function(){
					if (globalMe.scrollable){
						if ($('#imgpop-mainimage-div').width() != globalMe.width - globalMe.border_left - globalMe.border_right){
							var leftpos = (($('#imgpop-mainimage-div').offset().left - ll) / (ll2 - ll)) * globalMe.horzontalBarLength ;
							$('#imgpop-handlehor').css({
								left:				leftpos
							});
						}
						if ($('#imgpop-mainimage-div').height() > globalMe.height- globalMe.border_top - globalMe.border_bottom){
							var toppos = globalMe.verticalBarLength- (($('#imgpop-mainimage-div').offset().top - hh) / (hh2 - hh)) * globalMe.verticalBarLength ;
							
							$('#imgpop-handlever').css({
								top:				toppos
							});
						}else if ($('#imgpop-mainimage-div').height() < globalMe.height- globalMe.border_top - globalMe.border_bottom){
							var toppos = (($('#imgpop-mainimage-div').offset().top - hh) / (hh2 - hh)) * globalMe.verticalBarLength ;
							
							$('#imgpop-handlever').css({
								top:				toppos
							});
						}
					}
				}
		});
	}
}

function _finish() {
	$('#imgpop-imgbox').remove();
	$('#imgpop-overlay').fadeOut(function() { $('#imgpop-overlay').remove(); });
	$('embed, object, select','li').css({ 'visibility' : 'visible' });
	
	if ((globalMe.finishScript).length >0){
		eval(globalMe.finishScript);
	}
}

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;
	}	
	// 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 = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
	return arrayPageSize;
};

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 ___pause(ms) {
	var date = new Date(); 
	curDate = null;
	do { var curDate = new Date(); }
	while ( curDate - date < ms);
 };