Import('myLib/util/PageOffset.js');
Import('myLib/util/ImageManager.js');
ImageLayer = function(){};
ImageLayer.defaultId = 's1j9k2e4r5t';
ImageLayer.layerWidth = 0;
ImageLayer.layerHeight = 0;
ImageLayer.layer = null;
ImageLayer.indexType = {
	CURRENT:	1,
	PREVIOUS:	2,
	NEXT:		3
};
ImageLayer.values = [];
ImageLayer.style = {
	backgroundColor: 	'white',
	border: 			'white 1px solid'
};
//--- public
ImageLayer.showOnce = function(image, description){
	ImageLayer.values = [{
		'id':			ImageLayer.defaultId,
		'image':		image,
		'description':	System.getValue(description)
	}];
	//ImageLayer.style.backgroundColor = 'white';
	ImageLayer.show(ImageLayer.defaultId, true);
};
//--- public
ImageLayer.showById = function(id){
	ImageLayer.show(id, false);
};
//--- private
ImageLayer.show = function(id, isOnce){
	if(ImageLayer.layer == null){
		ImageLayer.createLayer();
	}
	var src = ImageLayer.getValuesById(id)['image'];

	var func = function(image, params){
		ImageLayer.computeSize(image);
		ImageLayer.initSize();
		ImageLayer.initPosition();
		if(ImageLayer.loadContent(params.id, params.isOnce)){
			ImageLayer.visible();
		}
	};
	var params = {
		'id':		id,
		'isOnce':	isOnce
	}
	ImageManager.load(src, func, params);
};
//--- public
ImageLayer.setStyle = function(style){
	for(var i in style){
		ImageLayer.style[i] = style[i];
	}
};
//--- public
ImageLayer.setValues = function(id, image, description){
	//var image = System.getValue(image);
	//var description = System.getValue(description);
	var index = ImageLayer.values.length;
	ImageLayer.values[index] = {
		'id':			id,
		'image':		image,
		'description':	description
	};
	/*
	if(typeof(id) == 'object'){
		var values = id;
		for(var i in values){
			ImageLayer.values[index][i] = values[i];
		}
	}
	*/
	return index;
};
ImageLayer.visible = function(){
	ImageLayer.showModal(true);
	ImageLayer.layer.style.visibility = 'visible';
};
ImageLayer.hidden = function(){
	ImageLayer.layer.style.visibility = 'hidden';
	ImageLayer.showModal(false);
};
ImageLayer.createLayer = function(){
	ImageLayer.layer = document.createElement('div');
	ImageLayer.layer.style.zIndex = 100;
	ImageLayer.layer.style.position = 'absolute';
	ImageLayer.layer.style.backgroundColor = ImageLayer.style.backgroundColor;
	ImageLayer.layer.style.border = ImageLayer.style.border;
	var body = document.getElementsByTagName('body')[0];
	body.appendChild(ImageLayer.layer);
};
ImageLayer.initSize = function(){
	ImageLayer.layer.style.width = ImageLayer.layerWidth + 'px';
	ImageLayer.layer.style.height = ImageLayer.layerHeight + 'px';
};
ImageLayer.initPosition = function(){
	ImageLayer.layer.style.left = ImageLayer.getLayerPositionX() + 'px';
	ImageLayer.layer.style.top = ImageLayer.getLayerPositionY() + 'px';
};
ImageLayer.loadContent = function(id, isOnce){
	var index = ImageLayer.loadIndex(id, ImageLayer.indexType.CURRENT);

	//alert(ImageLayer.values[index]);

	if(typeof(ImageLayer.values[index]) == 'undefined'){
		return false;
	}

	var previousId = ImageLayer.loadId(id, ImageLayer.indexType.PREVIOUS);
	var nextId = ImageLayer.loadId(id, ImageLayer.indexType.NEXT);

	//alert(previousId + ' - ' + index + ' - ' + nextId);

	var description = ImageLayer.values[index]['description'];
	var image = ImageLayer.values[index]['image'];
	
	var img = new Image();
	img.src = image;
	
	//alert(img.width);

	//if(description == ''){
	//	description = ' ';
	//}
	//else
	//	description = '<div style="text-align: center; margin: 5px 0 5px 0;">' + description + '</div>';

	//Config.getPathToData() +
	var c = '<div style="margin: 10px;">' +
	'<table cellspacing="0" cellpadding="0" border="0">' +
	'<tr><td colspan="2" style="text-align: center;"><div style="position: relative; width: ' + img.width + 'px; height: ' + 
	img.height + 'px; background: url(' + image + ');">';
	if(!isOnce && previousId > 0){
		c += '<div style="position: absolute; left: 5px; bottom: 5px;">' +
		'<a href="javascript:void(null);" onclick="ImageLayer.show(' + previousId + ');" title="poprzednie"><img src="' +
		Config.getPathToData() + 'layout/strzala_lewo.png" alt="poprzednie" /></a></div>';
	}
	if(!isOnce && nextId > 0){
		c += '<div style="position: absolute; left: ' + (img.width - 31) + 'px; bottom: 5px;">' +
		'<a href="javascript:void(null);" onclick="ImageLayer.show(' + nextId + ');" title="następne"><img src="' +
		Config.getPathToData() + 'layout/strzala_prawo.png" alt="następne" /></a></div>';
	}
	c += '&nbsp;</div></td></tr>' +
	'<tr><td style="padding: 5px 5px 0 0; color: black;">' + (description != '' ? '<div style="padding: 5px 0 0 15px; background: url(' + 
	Config.getPathToData() + 'layout/dotA.jpg) no-repeat 3px 9px;">' + description + '</div>' : '&nbsp;') + '</td>' +
	'<td style="text-align: right; padding: 5px 0 0 5px; vertical-align: top;">' +
	'<a href="javascript:void(null);" onclick="ImageLayer.hidden();" title="zamknij"><img src="' +
	Config.getPathToData() + 'layout/iconClose.jpg" alt="zamknij" /></a></td></tr>' +
	'</table>' +
	/*
	'<table cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">' +
	'<tr>' +
	'<td style="width: 50px;">';
	if(!isOnce && previousId > 0)
		c += '<input type="button" value="<<" class="arrow" title="" style="width: 45px; height: 26px; font: 8pt; color: black;" title="" onclick="ImageLayer.show(' + previousId + ');" />&nbsp;';
	else
		c += '&nbsp;';
	c += '</td>' +
	'<td><input type="button" value="zamknij" style="width: 80px; height: 26px; font: 8pt; color: black;" title="" onclick="ImageLayer.hidden();" /></td>' +
	'<td style="width: 50px; text-align: right;">';
	if(!isOnce && nextId > 0)
		c += '&nbsp;<input type="button" value=">>" class="arrow" title="" style="width: 45px; height: 26px; font: 8pt; color: black;" title="" onclick="ImageLayer.show(' + nextId + ');" />';
	else
		c += '&nbsp;';
	c += '</td>' +
	'</tr>' +
	'</table>' +
	*/
	'<div>';


	ImageLayer.layer.innerHTML = c;

	return true;
};

ImageLayer.computeSize = function(image){
	//var values = ImageLayer.getValuesById(id)
	ImageLayer.layerWidth = image.width + 20;
	ImageLayer.layerHeight = image.height + 50;
};

ImageLayer.getLayerPositionX = function(){
	return ImageLayer.calculatePosition(
		(document.documentElement || document.body).clientWidth,
		ImageLayer.layerWidth
	);
};

ImageLayer.getLayerPositionY = function(){
	//alert(PageOffset.getOffset() + ' - ' + document.body.clientHeight);
	//alert(document.body);
	//document.body = document.documentElement.clientHeight);
	return PageOffset.getOffset() + ImageLayer.calculatePosition(
		(document.documentElement || document.body).clientHeight,
		ImageLayer.layerHeight
	);
};

ImageLayer.calculatePosition = function(windowLength, layerLength){
	var value = 0;
	if(windowLength > layerLength){
		value = (windowLength / 2) - (layerLength / 2);
	}
	return value;
};

//---

ImageLayer.getValuesById = function(id){
	for(var i = 0; i < ImageLayer.values.length; i++){
		if(ImageLayer.values[i]['id'] == id){
			return ImageLayer.values[i];
		}
	}
};

ImageLayer.loadIndex = function(id, indexType){
	for(var i = 0; i < ImageLayer.values.length; i++){
		if(ImageLayer.values[i]['id'] == id){
			if(indexType == ImageLayer.indexType.CURRENT)
				return i;
			else if(indexType == ImageLayer.indexType.PREVIOUS)
				return i - 1;
			else if(indexType == ImageLayer.indexType.NEXT)
				return i + 1;
		}
	}
	return -1;
};
ImageLayer.loadId = function(id, indexType){
	var index = ImageLayer.loadIndex(id, indexType);
	if(typeof(ImageLayer.values[index]) != 'undefined')
		return ImageLayer.values[index]['id'];
	else
		return 0;
};

ImageLayer.showModal = function(isVisible){
	var modal = document.getElementById('modal');
	if(modal != null){
		//if(isVisible){
			//alert(document.body.offsetHeight);
        	//modal.style.height = document.body.offsetHeight + 'px';
		//}
		if(isVisible){
			var t = ImageLayer.getPageSize();
			//modal.style.width = t[0] + 'px';
			modal.style.height = t[1] + 'px';
		}
        modal.style.visibility = isVisible ? 'visible' : 'hidden';
	}
};

ImageLayer.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;
};