// Global variables
var imgArray = new Array();
var imgPath = 'imagini/B';
var imgHistory;
var img;
var imgTotal;
var imgIdent;

// CSS styles
var CSS_background = 'position: absolute; top: 0px; left: 0px; float: left; background-color: #000; border:0px solid #FFF; padding:0px; filter:alpha(opacity=80); opacity: 0.8; -moz-opacity:0.8;';
var CSS_appWrapper = 'position: absolute; float:right; background-color: #fff; display: table-cell; margin: auto;border: 5px solid #fff;';
var CSS_zAppNav = 'font-size:1pt;display: none; background-color:#fff; height:19px;';
var CSS_navHolder1 = 'display:table-cell;float:left;padding-top:7px;width:50%;height:12px;background-color:#fff;text-align:left;';
var CSS_navHolder2 = 'display:table-cell;float:left;width:50%;height:12px;padding-top:7px;background-color:#fff;text-align:right;';

// Numeral images
var numImg = new Array();
numImg[0] = '<img src="img/zoomApp/0.gif" />';
numImg[1] = '<img src="img/zoomApp/1.gif" />';
numImg[2] = '<img src="img/zoomApp/2.gif" />';
numImg[3] = '<img src="img/zoomApp/3.gif" />';
numImg[4] = '<img src="img/zoomApp/4.gif" />';
numImg[5] = '<img src="img/zoomApp/5.gif" />';
numImg[6] = '<img src="img/zoomApp/6.gif" />';
numImg[7] = '<img src="img/zoomApp/7.gif" />';
numImg[8] = '<img src="img/zoomApp/8.gif" />';
numImg[9] = '<img src="img/zoomApp/9.gif" />';

// Application core functions
function zoomApp(images) {
	imgArray = explode(",", images);
	scrollMonitor();
	preloadImage(0);
}

function replaceImg(string) {
	var imgRow = "";
	string = String(string);
	for(i = 0; i < string.length; i++){
		imgRow += numImg[string.charAt(i)];
	}
	return imgRow;
}

function preloadImage(identifier) {
	GUI_init();
	imgHistory = imgArray[identifier];
	imgTotal = imgArray.length;
	imgIdent = identifier;
	getImgSize(imgArray[identifier]);
}

function closeZoomApp() {
	document.getElementById('gHolder').style.display = 'none';
	document.getElementById('gHolder').innerHTML = '&nbsp;';
}

function getImgSize(img) {
	var newImg = new Image();
	newImg.onload = getImgWH;
	newImg.src = imgPath+img+"?update="+Math.random();
}

function getImgWH() {
	GUI_resize(this.width, this.height);
	return true;
}

function getWindowWH() {
	var winWH = new Array;
	winWH['width'] = 0;
	winWH['height'] = 0;
	if(typeof(window.innerWidth) == 'number') {
		//Non-IE
		winWH['width'] = window.innerWidth;
		winWH['height'] = window.innerHeight;
	} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		//IE 6+ in 'standards compliant mode'
		winWH['width'] = document.documentElement.clientWidth;
		winWH['height'] = document.documentElement.clientHeight;
	} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
		//IE 4 compatible
		winWH['width'] = document.body.clientWidth;
		winWH['height'] = document.body.clientHeight;
	}
	return winWH;
}

function getDocumentWH() {
	var docWH = new Array;
	docWH['width'] = $(window).width();
	if ($(window).height() > $(document).height()) { docWH['height'] = $(window).height(); }
	else { docWH['height'] = $(document).height(); }
	return docWH;
}

function getScrollAmount() {
	var iebody = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
	var scrTop = document.all? iebody.scrollTop : pageYOffset;
	return scrTop;
}

function getAppPositionXY(appW, appH, bgW) {
	var appPosXY = new Array;
	scrTop = getScrollAmount();
	viewHeight = getWindowWH();
	appPosXY['top'] = Math.round((viewHeight['height']/2) - (appH/2) + scrTop);
	appPosXY['left'] = Math.round((bgW / 2) - (appW / 2));
	return appPosXY;
}

function explode(delimiter, string) {
    var emptyArray = {0:''};
    if (arguments.length != 2 || typeof arguments[0] == 'undefined' || typeof arguments[1] == 'undefined') { return null; }
    if (delimiter === '' || delimiter === false || delimiter === null) { return false; } 
    if (typeof delimiter == 'function' || typeof delimiter == 'object' || typeof string == 'function' || typeof string == 'object') { return emptyArray; } 
    if (delimiter === true) { delimiter = '1'; }
    return string.toString().split ( delimiter.toString() );
}

/////////////
// EVENTS //
/////////////

function scrollEvent() {
	if($(".appIMG").css("display") == "inline") {
		var docWH = getDocumentWH();
		var bgW = docWH['width'];
		
		// Application Width and Height
		appW = explode("px", document.getElementById('appWrapper').style.width);
		appH = explode("px", document.getElementById('appWrapper').style.height);
		
		// Application perfect position
		var appPosXY = getAppPositionXY(appW[0], appH[0], bgW);
		appTop = appPosXY['top'];
		
		// Repositioning
		document.getElementById('appWrapper').style.top = (appTop+10)+"px";
	}
}

function scrollMonitor() {
	setInterval("scrollEvent()", 10);
}

/////////////
// APP GUI //
/////////////
function GUI_init() {
	var appW = 100;
	var appH = 50;

	// Transparent background Width and Height
	var docWH = getDocumentWH();
	var bgW = docWH['width'];
	var bgH = docWH['height'];
	
	// Application perfect position
	var appPosXY = getAppPositionXY(appW, appH, bgW);
	appTop = appPosXY['top'];
	appLeft = appPosXY['left'];
	
	// Add dimensions to global CSS styles
	CSS_background += 'height: '+bgH+'px; width: '+bgW+'px;';
	CSS_appWrapper += 'top: '+appTop+'px; left: '+appLeft+'px; width:'+appW+'px; height:'+appH+'px;';
	
	// Display App
	var appCode = '<div style="'+CSS_background+'"></div>';
	appCode += '<div id="appWrapper" style="'+CSS_appWrapper+'"><div id="imageHolder"><img id="appLoading" src="img/zoomApp/loading.gif" /></div></div>';
	document.getElementById('gHolder').innerHTML = appCode;
	document.getElementById('gHolder').style.display = 'block';
}

function GUI_image() {
	var appCode = '<a href="javascript:closeZoomApp();"><img class="appIMG" src="'+imgPath+imgHistory+'" style="display:none;" /></a>';
	document.getElementById('imageHolder').innerHTML = appCode;
	$(".appIMG").fadeIn("slow", GUI_nav);
}

function GUI_resize(appW, appH) {
	// Transparent background Width and Height
	var docWH = getDocumentWH();
	var bgW = docWH['width'];
	
	// Application perfect position
	var appPosXY = getAppPositionXY(appW, appH, bgW);
	appTop = appPosXY['top'];
	appLeft = appPosXY['left'];
	
	// Animation of image holder
	$("#appLoading").fadeOut("slow", GUI_clear);
	$("#appWrapper").animate({"width": appW+"px", "left": appLeft+"px"}, "medium");
	$("#appWrapper").animate({"height": (appH+20)+"px", "top": appTop+"px"}, "slow", GUI_image);
}

function GUI_clear() {
	document.getElementById('imageHolder').innerHTML = '';
}

function GUI_nav() {
	if(imgTotal > 1) {
		var navInfo = '<img src="img/zoomApp/image.gif" />'+replaceImg(imgIdent+1)+'<img src="img/zoomApp/of.gif" />'+replaceImg(imgTotal);
		var navContent;
		if(imgIdent > 0) {
			navContent = '<a href="javascript:preloadImage('+(imgIdent-1)+')"><img src="img/zoomApp/prev.gif" /></a>';
		}
		if((imgIdent+1) < imgTotal) {
			if(navContent == undefined) {
				navContent = '<a href="javascript:preloadImage('+(imgIdent+1)+')"><img src="img/zoomApp/next.gif" /></a>';
			} else navContent += '<img src="img/zoomApp/slash.gif" /><a href="javascript:preloadImage('+(imgIdent+1)+')"><img src="img/zoomApp/next.gif" /></a>';
		}
	} else if(imgTotal == 1) {
		navContent = "";
	} else if(imgTotal < 1) {
		closeZoomApp();
	}
	document.getElementById('imageHolder').innerHTML += '<div id="zAppNav" style="'+CSS_zAppNav+'"><div style="'+CSS_navHolder1+'">'+navInfo+'</div><div style="'+CSS_navHolder2+'">'+navContent+'</div></div>';
	$("#zAppNav").fadeIn("slow");
}