var allImages = new Array();
allImages.push(new MyImage("images/expozice/systems.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/ereal.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/transport.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/transport2.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/project.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/project1.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/banka.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/moto.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/moto3.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/moto2.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/lanex.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/ispo.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/ihm.jpg", 600, 450));
allImages.push(new MyImage("images/expozice/ihm2.jpg", 600, 450));


function MyImage(src, width, height) {
    this._src = src;
	this._width = width;
	this._height = height;
}

MyImage.prototype._src;
MyImage.prototype._width;
MyImage.prototype._height;

MyImage.prototype.getSrc = function() {
    return this._src;
}
MyImage.prototype.getWidth = function() {
    return this._width;
}
MyImage.prototype.getHeight = function() {
    return this._height;
}


var sbBox = null;
var sbOverlay = null;
var sbImg = null;
var sbActual = 0;
var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
var eventListeners = [];


function sbMove(a) {
	if (a < 0) {
		a = 0;	
	} else if (a > (allImages.length - 1)) {
		a = allImages.length - 1;
	}
	sbActual = a;
	sbImg.src = allImages[sbActual].getSrc();
	sbBox.style.left = ((document.documentElement.clientWidth - allImages[sbActual].getWidth()) / 2 + iebody.scrollLeft) + "px";
	sbBox.style.top = ((document.documentElement.clientHeight - allImages[sbActual].getHeight()) / 2 + iebody.scrollTop - 10) + "px";
}

function prevButtonClick() {
	sbMove(sbActual - 1);
}

function nextButtonClick() {
	sbMove(sbActual + 1);
}

function closeButtonClick() {
	var images = document.getElementsByTagName('body')[0];
	images.removeChild(sbBox);
	images.removeChild(sbOverlay);
	sbBox = null;
	sbOverlay = null;
	sbImg = null;
}

function makeOverlay() {
	var overlay = document.createElement('div');
	overlay.style.position = "absolute";
	overlay.style.backgroundColor = "#000000";
	overlay.style.width = "100%";
	overlay.style.height = (iebody.scrollHeight > iebody.offsetHeight ? iebody.scrollHeight : iebody.offsetHeight) + "px";
	overlay.style.opacity = 0.5;
	overlay.style.top = 0;
	overlay.style.left = 0;
	overlay.style.filter = "alpha(opacity=50)";
	return overlay;
}

function makeBox() {
	var box = document.createElement('div');
	box.style.position = "absolute";
	box.style.backgroundColor = "#FFFFFF";
	box.style.borderWidth = "3px";
	box.style.borderColor = "#cccccc";
	box.style.borderStyle = "solid";
	box.style.textAlign = "right";
	
	var boxInner = document.createElement('div');
	boxInner.style.backgroundImage = "url('images/loading.gif')";
	boxInner.style.backgroundPosition = "237px 214px";	
	boxInner.style.backgroundRepeat = "no-repeat";
	boxInner.style.height = "450px";
	boxInner.style.width = "600px";
	box.appendChild(boxInner);
	
	sbImg = document.createElement('img');
	sbImg.title = "Zavřít";
	sbImg.style.cursor = "pointer";
	boxInner.appendChild(sbImg);
	myAddEventListener(sbImg, 'click', closeButtonClick);
	
	box.appendChild(document.createElement('br'));
    
	prevDiv = document.createElement('span');
	prevDiv.innerHTML = "&laquo; předchozí";
	prevDiv.style.fontSize = "14px";
	prevDiv.style.lineHeight = "21px";
	prevDiv.style.color = "#666666";
	prevDiv.style.cursor = "pointer";
	prevDiv.style.padding = "3px";
	box.appendChild(prevDiv);
    myAddEventListener(prevDiv, 'click', prevButtonClick);
	
	nextDiv = document.createElement('span');
	nextDiv.innerHTML = "další &raquo;";
	nextDiv.style.fontSize = "14px";
	prevDiv.style.lineHeight = "21px";
	nextDiv.style.color = "#666666";
	nextDiv.style.cursor = "pointer";
	nextDiv.style.padding = "3px";
	box.appendChild(nextDiv);
    myAddEventListener(nextDiv, 'click', nextButtonClick);
	
	closeDiv = document.createElement('span');
	closeDiv.innerHTML = "zavřít &times;";
	closeDiv.style.fontSize = "14px";
	prevDiv.style.lineHeight = "21px";
	closeDiv.style.color = "#666666";
	closeDiv.style.cursor = "pointer";
	closeDiv.style.padding = "3px";
	closeDiv.style.paddingLeft = "10px";
	box.appendChild(closeDiv);
    myAddEventListener(closeDiv, 'click', closeButtonClick);
	
	return box;
}

function sbShowImage(poradi) {
	sbActual = parseInt(poradi) - 1;
	if (sbBox == null) {
		var body = document.getElementsByTagName('body')[0];
		sbOverlay = makeOverlay();
		body.appendChild(sbOverlay);
		sbBox = makeBox();
		body.appendChild(sbBox);
		
	}
	sbMove(sbActual);
}

function myAddEventListener(node, event, handler) {
    if (!node.addEventListener) {
        node.attachEvent('on' + event, handler);
    } else {
        node.addEventListener(event, handler, false);
    }
    eventListeners.push({node: node, event: event, handler: handler});
}