PopupAnimation = function(){
	
}


PopupAnimation.prototype.increase = function(amnt){
	$('popupBg').style.opacity+=amnt;
	if($('popupBg').style.opacity){
		setTimeout(this.increase(amnt), 10);
	}
}

PopupAnimation.prototype.blendIn = function(){
	$('popupBg').style.visibility = 'visible';
	//this.increase(1/100);
	
}

PopupAnimation.prototype.blendOut = function(){
	$('popupBg').style.visibility = 'visible';
	
	
	
}



$ = function(elementId){
	return document.getElementById(elementId);
}


PopupWindow = function(popupId) {
	//$('popupBg').style.opacity = 0;
	var self = this;
	
	this.popup = $(popupId);
	this.image = $('largeImage');
	this.photos = $('gallery');
	
	this.photosAmount = this.photos.getElementsByTagName('div').length;
}

PopupWindow.prototype.refresh = function(){
	if(this.active){
		this.reposition();
	}
}


PopupWindow.prototype.firePopup = function(element){
	
	this.active = true;
	this.animation.blendIn();
	this.photoNo = element.getAttribute('no');
	
	this.reposition();
	
	
	this.setImage();
}


PopupWindow.prototype.reposition= function(){
	var height = (typeof window.innerHeight != 'undefined') ? window.innerHeight : document.documentElement.clientHeight;
	var width = (typeof window.innerWidth != 'undefined') ? window.innerWidth : document.documentElement.clientWidth;
	
	var top = (height / 2) - (300 + 60);
	this.popup.style.top = top+"px";
	var left = (width / 2) - (225 +45);
	this.popup.style.left = left+"px";
	this.popup.style.visibility = "visible";
}


PopupWindow.prototype.attachRefreshHandler = function() {
	var self = this;
	window.onresize = function(){self.refresh(this);}
}

PopupWindow.prototype.attachFirePopupHandler = function(element) {
	var self = this;
	element.onclick = function(){self.firePopup(this);}
}

PopupWindow.prototype.attachClosePopupHandler = function(element) {
	var self = this;
	element.onclick = function(){self.closePopup();}
}

PopupWindow.prototype.attachFlipRightHandler = function(element) {
	var self = this;
	element.onclick = function(){self.flipRight();}
}

PopupWindow.prototype.attachFlipLeftHandler = function(element) {
	var self = this;
	element.onclick = function(){self.flipLeft()}
}

PopupWindow.prototype.setImage = function() {
	var src = 'photo/'+this.photoNo+'.jpg';
	this.image.src = src; 
	$('counter').innerHTML = '<span>'+this.photoNo+'/'+this.photosAmount+'</span>';
}


PopupWindow.prototype.flipLeft = function(){
	if(this.photoNo == 1){
		this.photoNo = this.photosAmount;
	}
	else{
		this.photoNo--;
	}
	this.setImage();
}

PopupWindow.prototype.flipRight = function(){
	if(this.photoNo == this.photosAmount){
		this.photoNo = 1;
	}
	else{
		this.photoNo++;
	}
	this.setImage();
}

PopupWindow.prototype.closePopup = function(){
	this.popup.style.visibility = "hidden";
	$('popupBg').style.visibility = 'hidden';
	this.active = false;
}

PopupWindow.prototype.photoNo = 1;
PopupWindow.prototype.popup;
PopupWindow.prototype.animation = new PopupAnimation();
PopupWindow.prototype.active = false;

function init(){
	var popupWindow = new PopupWindow('popup');
	var gallery = $('gallery');
	var images = gallery.getElementsByTagName('img');

	for(var i = 0 ; i < images.length; i++){
		images[i].setAttribute('no', i+1);
		popupWindow.attachFirePopupHandler(images[i]);
	}
	
	popupWindow.attachClosePopupHandler($('closePopupMark'));
	popupWindow.attachFlipRightHandler($('flipRight'));
	popupWindow.attachFlipLeftHandler($('flipLeft'));
	
	
	popupWindow.attachRefreshHandler();
	
	
	
	
}