function viewer(){

	document.viewer 	= this;
	this.currentImg 	= 0;
	this.prevImg 		= false;
	this.nextImg 		= false;
	this.opened		= false;
	this.made		= false;
	
	this.closeKeys		= [27, 88, 67];
	this.previousKeys	= [37, 52, 112];
	this.nextKeys		= [39, 54, 110];
	
	this.items 		= new Array();
	this.currentnp		= false;
	this.timeoutnp		= false;
	
};

viewer.prototype.make = function(){
	
	$(document).addEvent('keypress', this.keyPress.bind(this));
	
	$(document.body).adopt(
		$$(
			vwbg = new Element('div', {id:'viewerbg', styles:{opacity:0}, events:{click:this.close}}),
			vwcont = new Element('table', {id:'viewercontainer', styles:{display:'none'}, events:{click:this.close}}),
			vwloader = new Element('img', {id:'viewerloader', styles:{opacity:0}, events:{load:this.imgloaded.bind(this)}}),
			vwpreloader = new Element('img', {styles:{opacity:0,width:'1px',height:'1px',position:'absolute'}})
		)	
	);
	vwtr = $(vwcont).insertRow(0);
	$(vwtr).adopt($$(vwcell = new Element('td')));
	$(vwcell).adopt($$(vwframe = new Element('div', {id:'viewerframe', styles:{opacity:0}})));
	$(vwframe).adopt(
		$$(
			vwsizer = new Element('div', {id:'viewersizer'}),
			vwspacer = new Element('div', {id:'viewerspacer', styles:{height:'0px',fontSize:'0px'}}),
			vwinfo = new Element('div', {id:'viewerinfos', styles:{marginTop:'0px',height:'0px'}})
		)
	);	
	$(vwsizer).adopt(
		$$(
			vwload = new Element('img', {id:'viewerload', src:'images/viewer/loading.gif', styles:{opacity:0,position:'relative',top:'80px'}}),
			vwimg = new Element('img', {id:'viewerimage',alt:'',styles:{opacity:0},
			
				events:{
					mousemove: function(e){
						if(this.timeoutnp) clearTimeout(this.timeoutnp);
						this.timeoutnp = setTimeout(function(){ $(vwimg).fireEvent('mouseout'); }, 2000);
						if(e.client.x < $(document.body).getSize().x/2){
							if(!this.currentnp){
								$(vwprev).makeAnim({left:$(vwprev).get('leftOver'), opacity:.7});
								this.currentnp = 'prev';
							}else{
								if(this.currentnp == 'next'){
									$(vwprev).makeAnim({left:$(vwprev).get('leftOver'), opacity:.7});
									$(vwnext).makeAnim({left:$(vwnext).get('leftOut'), opacity:0.0});
									this.currentnp = 'prev';
								}
							}
						}else{
							if(!this.currentnp){
								$(vwnext).makeAnim({left:$(vwnext).get('leftOver'), opacity:.7});
								this.currentnp = 'next';
							}else{
								if(this.currentnp == 'prev'){
									$(vwnext).makeAnim({left:$(vwnext).get('leftOver'), opacity:.7});
									$(vwprev).makeAnim({left:$(vwprev).get('leftOut'), opacity:0.0});
									this.currentnp = 'next';
								}
							}
						}
					}.bind(this),
					mouseout: function(e){
						$(vwprev).makeAnim({left:$(vwprev).get('leftOut'), opacity:0});
						$(vwnext).makeAnim({left:$(vwnext).get('leftOut'), opacity:0});
						this.currentnp = false;
					}.bind(this),
					click: function(e){ 
						if(e.client.x < $(document.body).getSize().x/2){
							this.currentImg = this.prevImg; this.changePic(); e.stopPropagation();
						}else{
							this.currentImg = this.nextImg; this.changePic(); e.stopPropagation();
						}
					}.bind(this)
				}
			}),
			vwprev = new Element('img', {
				src:'images/prev.png', 
				styles:{opacity:0,position:'absolute', zIndex:54, cursor:'pointer'},
				events:{
					mousemove: function(e){ $(vwimg).fireEvent("mousemove", e); e.stopPropagation(); },
					click:  function(e){ $(vwimg).fireEvent("click", e); e.stopPropagation(); }
				}
			}),
			vwnext = new Element('img', {
				src:'images/next.png', 
				styles:{opacity:0,position:'absolute', zIndex:54, cursor:'pointer'},
				events:{
					mousemove: function(e){ $(vwimg).fireEvent("mousemove", e); e.stopPropagation(); },
					click:  function(e){ $(vwimg).fireEvent("click", e); e.stopPropagation(); }
				}
			})
		)
	);
	
	$(vwinfo).adopt(
		$$(
			vwimgnum = new Element('span', {id:'viewerimgnum'}),
			vwclose	= new Element('img', {
				id:'viewerclose',
				src:'images/viewer/close.png',
				styles:{cursor:'pointer', backgroundColor:'#777777'},
				events:{
					click:this.close,
					mouseover: function(){this.makeAnim({backgroundColor:'#f58808'})},
					mouseout: function(){this.makeAnim({backgroundColor:'#777777'})}
				}
			})
		)
	);
	
	[vwbg,vwframe,vwsizer,vwclose,vwload,vwimg,vwinfo,vwprev,vwnext,vwspacer].each($Anim);

	vwbg.anim.Fx = vwsizer.anim.Fx = vwframe.anim.Fx = vwprev.anim.Fx= vwnext.anim.Fx = "easeOutCubic";
	vwbg.anim.duration = vwsizer.anim.duration  = vwprev.anim.duration = vwnext.anim.duration = vwframe.anim.duration = 500;
	
	xDecal = 0;
	if(!Browser.Engine.trident || navigator.userAgent.toLowerCase().indexOf("msie 8.0")!=-1)
		xDecal = 3;
	if(Browser.Engine.webkit)
		xDecal = 3;
	$(vwsizer).addEvent("animfinish", function(){
		if($(vwframe).getSize().x != $(vwloader).getSize().x+xDecal)
				$(vwframe).makeAnim({width:vwloader.getSize().x+xDecal});
		else{
			$(vwframe).fireEvent("animfinish");
		}
	});
	
	$(vwimg).addEvent("load", function(){
		this.setImgNum(); 
		$(vwimg).makeAnim({opacity:1});
		$(vwload).makeAnim({opacity:0}); 
		
		
		$$(vwprev,vwnext).setStyle("display", "block");
		$(vwprev).set("leftOut", 100);
		$(vwprev).set("leftOver", 0);
		$(vwnext).set("leftOut", $(vwimg).getSize().x-$(vwnext).getSize().x-100);
		$(vwnext).set("leftOver", $(vwimg).getSize().x-$(vwnext).getSize().x);
		
		$(vwprev).setStyles({
			left: $(vwprev).get('leftOut')+"px",
			top: $(vwimg).getSize().y/2-$(vwprev).getSize().y/2 +"px"
		});
		$(vwnext).setStyles({
			left: $(vwnext).get('leftOut')+"px",
			top: $(vwimg).getSize().y/2-$(vwnext).getSize().y/2 +"px"
		});
		
	}.bind(this));
	
	this.made = true;
};

viewer.prototype.getRatio = function(x,y){
	return eval(x/y);
};

viewer.prototype.keyPress = function(event){
	if(!this.opened) return true;
	code = event.code;
	if(this.closeKeys.contains(code))
		this.close();
	if(this.previousKeys.contains(code)){
		this.currentImg = this.prevImg;
		this.changePic();
	}
	if(this.nextKeys.contains(code)){
		this.currentImg = this.nextImg;
		this.changePic();
	}	
	return true;
};

viewer.prototype.setTop = function(){
	var scrollT;
	if(Browser.Engine.webkit)
		scrollT = $(document.body).scrollTop;
	else
		scrollT = $(document.documentElement).scrollTop;

	if(this.made)
		$$($(vwbg), $(vwcont)).setStyle("top", scrollT+"px");

};

viewer.prototype.imgloaded = function(){
	
	$(vwframe).addEvent("animfinish", function(){		
		$(vwimg).addEvent("animfinish", function(){
			$(vwinfo).makeAnim({height:16});
			$(vwspacer).makeAnim({height:5});
			this.removeEvents("animfinish");
		});
		$(vwimg).src = $(vwloader).src;
		$(vwpreloader).src = this.items[this.nextImg];+
		$(vwframe).removeEvents("animfinish");
	}.bind(this));
	
	//fix for mobil phones
	//$$(vwprev,vwnext).setStyle("opacity", "1");
	
	//if it has been resized
	$(vwloader).setStyles({
		width: "auto", 
		height: "auto"
	});

	//resize the picture if larger than browser's window;
	margin = { x: -40, y: -60 };
	if($(vwloader).getSize().x > $(document.body).getSize().x+margin.x || $(vwloader).getSize().y > $(document.body).getSize().y+margin.y){

		imgRatio = this.getRatio($(vwloader).getSize().x,$(vwloader).getSize().y);
		srcRatio = this.getRatio($(document.body).getSize().x+margin.x,$(document.body).getSize().y+margin.y);

		if(srcRatio < imgRatio)
			$(vwloader).setStyles({
				width: ($(document.body).getSize().x+margin.x)+"px",
				height: "auto" //($(document.body).getSize().x/imgRatio)+"px"
			});
		else
			$(vwloader).setStyles({
				width: "auto", //($(document.body).getSize().y*imgRatio)+"px",
				height: ($(document.body).getSize().y+margin.y)+"px"
			});
		
		$(vwimg).setStyles({
			width: $(vwloader).getSize().x+"px", 
			height: $(vwloader).getSize().y+"px"
		});
	}else{
		$(vwimg).setStyles({
			width: "auto", 
			height: "auto"
		});
	}

	if($(vwsizer).getSize().y != $(vwloader).getSize().y)
		$(vwsizer).makeAnim({height:$(vwloader).getSize().y});
	else
		$(vwsizer).fireEvent("animfinish");
};

viewer.prototype.setPrevNext = function(){
	this.prevImg	= this.currentImg == 0 ? this.items.length-1 : this.currentImg-1;
	this.nextImg	= this.currentImg == this.items.length-1 ? 0 : this.currentImg+1;
};

viewer.prototype.changePic = function(E){
	$$(vwprev,vwnext).setStyle("display", "none");
	$(vwimg).addEvent("animfinish", function(){
		$(vwload).makeAnim({opacity:1});
		//this.currentImg = this.nextImg;
		this.setPrevNext();
		$(vwimg).set("src", false);
		$(vwloader).set("src", this.items[this.currentImg]);
		$(vwimg).removeEvents("animfinish");
	}.bind(this));
	$(vwimg).makeAnim({opacity:0});
	$(vwinfo).makeAnim({height:0});
	$(vwspacer).makeAnim({height:0});
	
};

viewer.prototype.open = function(index){
	
	this.setImgNum();
	
	$$(vwbg, vwcont).setStyle("display", "");
	$(vwframe).setStyles({width:'200px'});
	$(vwsizer).setStyles({height:'200px'});
		
	vwbg.makeAnim({opacity:.6});
	vwframe.makeAnim.delay(500, vwframe, {opacity:1});
	vwload.makeAnim.delay(500, vwload, {opacity:1});
	
	vwframe.addEvent("animfinish", function(){
		vwloader.set("src", this.items[index]);
		this.opened = true;
		vwframe.removeEvents("animfinish");
	}.bind(this));
	this.setTop();
	this.currentImg = index;
	this.setPrevNext();
};

viewer.prototype.close = function(){
	vwbg.makeAnim.delay(500,vwbg, {opacity:0});
	vwframe.makeAnim({opacity:0});
	$$(vwprev,vwnext).setStyle("display", "none");
	(function(){
		$$(vwbg, vwcont).setStyle("display", "none");
		$(vwimg).setStyle("opacity", 0);
		$(vwimg).set('src', "");
		$(vwloader).set('src', "");
		$(vwinfo).setStyles({height:0});
		$(vwspacer).makeAnim({height:0});
	}).delay(1000);
	this.opened = false;
};

viewer.prototype.setImgNum = function(){
	$$(vwimgnum).set('html', (this.currentImg+1)+' / '+this.items.length);
};

viewer.prototype.addItem = function(item){
	this.items.push(item);
};

viewer.prototype.addItems = function(items){
	this.items.combine(items);
};

viewer.prototype.clean = function(){
	this.items = new Array;
};


new viewer();

window.addEvent("domready", function(){	document.viewer.make(); });
$(document).addEvent("scroll", function(){ document.viewer.setTop(); });

//document.viewer.addItems(['img/1.jpg', 'img/19.jpg', 'img/20.jpg']);