var viewer = new Object();

$extend(viewer,{
	xml	: false,
	viewer	: "viewer",
	img	: "viewerImg",
	imgList	: "viewerImgList",
	isShown	: false,
	imgNum	: false,
	current	: false,
	items	: new Array(),
	
	show: function(){
		$(this.viewer).setStyle("display", "block");
		this.isShown = true;
	},
	
	hide: function(){
		$(this.viewer).setStyle("display", "none");
		$(this.img).src = "images/blank.gif";
		
		this.current = false;
		this.items = new Array();
		this.imgNum = false;
		this.isShown = false;
	},
	
	setXml: function(xml){
		if(!xml) return false;
		this.xml = xml;
	},
	
	setImg: function(num){
		
		if(!this.isShown){
			this.cleanImgList();
			this.makeImgList();
			this.show();
		}
		
		$(this.img).addEvent("load", function(e){
			document.body.style.cursor = "";
		});
		document.body.style.cursor = "wait";
		
		$(this.img).src = "images/works/"+this.xml.childNodes[num-1].getAttribute('id')+".jpg";
		this.makeActive(num-1);
		if(num == 1)
			this.hideNP(this.prevdiv);
		else
			this.showNP(this.prevdiv);
		
		if(num == this.imgNum)
			this.hideNP(this.nextdiv);
		else
			this.showNP(this.nextdiv);
			
	},
	
	nextImg: function(){
		if(this.current+2 <= this.imgNum)
		this.setImg(this.current+2);
	},
	
	prevImg: function(){
		if(this.current>0)
		this.setImg(this.current);
	},
	
	makeListEvent: function(el){
		el.addEvent("mouseover", function(e){ this.setStyles({backgroundColor:"#c61927", color:'white'}); });
		el.addEvent("mouseout", function(e){ this.setStyles({backgroundColor:"transparent", color:'#c61927'}); });	
	},
	
	ListRemoveEvents: function(el){
		el.removeEvents("mouseover");
		el.removeEvents("mouseout");
		el.removeEvents("click");
	},
	
	ListAddEvents: function(el){
		this.makeListEvent(el);
		el.addEvent("click", function(e){ viewer.setImg(this.num); });
	},
	
	showNP: function(el){
		el.setStyle("visibility", "visible");
	},
	
	hideNP: function(el){
		el.setStyle("visibility", "hidden");
	},
	
	makeActive: function(i){
		if(this.current !== false){
			this.ListAddEvents(this.items[this.current]);
			this.items[this.current].setStyles({cursor:"crosshair",backgroundColor:"transparent", color:'#c61927'});
		}
		this.items[i].setStyles({cursor:"default",backgroundColor:"#c61927", color:'white'});
		this.ListRemoveEvents(this.items[i]);
		this.current = i;
	},
		
	makeImgList: function(){
		if(!this.xml) return false;
		this.imgNum = this.xml.childNodes.length;
		
		var Type = "span";
		var Style = {backgroundColor:'transparent',cursor:'crosshair',borderRight:'1px solid #c61927',borderLeft:'1px solid #c61927',textAlign:'center',width:16,height:13,padding:"2px 4px 0px 4px",margin:"0 3px 0 0"};
		
		this.prevdiv = document.newElement(Type, {html:'&lt;',styles:Style});
		$(this.prevdiv).inject($(this.imgList));
		this.prevdiv.addEvent("click", function(e){ viewer.prevImg(); });
		this.makeListEvent(this.prevdiv);

		
		for(var i=0; this.xml.childNodes[i]; i++){
			this.items[i] = document.newElement(Type, {html:i+1,styles:Style});
			$(this.items[i]).inject($(this.imgList));	
			this.items[i].num = i+1;
			this.ListAddEvents(this.items[i]);
		}
		
		this.nextdiv = document.newElement(Type, {html:'&gt;',styles:Style});
		$(this.nextdiv).inject($(this.imgList));
		this.nextdiv.addEvent("click", function(e){ viewer.nextImg(); });
		this.makeListEvent(this.nextdiv);
		
		this.closediv = document.newElement(Type, {html:'X',styles:Style});
		$(this.closediv).inject($(this.imgList));
		this.closediv.addEvent("click", function(e){ viewer.hide(); });
		this.makeListEvent(this.closediv);

	},

	cleanImgList: function(){
		$(this.imgList).innerHTML = "";
	}	
});