var ImgList =  function(){};

var ImgListCaller = function(src){
	$ajax(src, false, ImgListCreator);
};

var ImgListCreator = function(response){
	if(!response) return false;
	var objName = response.xml.getElementsByTagName("objName")[0].getAttribute("value");
	document[objName] = new ImgList();
	document[objName].init();
	document[objName].updateXml(response);
	return document[objName];
};

ImgList.prototype.init = function(){
	
	this.isMade 		= false;
	this.childrenbuilt	= false;
	this.baseTop		= 20;
	this.make();
};

ImgList.prototype.updateXml = function(response){

	if(!response) return false;
	if(this.isMade) this.clean();
	this.items = new Array();
	
	this.xml 		= response.xml.firstChild;
	this.settings		= this.xml.getElementsByTagName("settings")[0];

	this.objContainer	= this.objContainer == "document.body" ? document.body : $(this.objContainer);
	this.itemContainer	= this.xml.getElementsByTagName("items")[0].childNodes;
	this.mainPath		= this.settings.getElementsByTagName("path")[0].getAttribute("value");
		
	this.resizeTimeout	= false;
	this.inResize		= false;
	
	var thumbs 		= this.settings.getElementsByTagName("thumbs")[0];
	this.thumbs		= {
		width: 		parseInt(thumbs.getAttribute("width")),
		height: 	parseInt(thumbs.getAttribute("height")),
		margin: 	parseInt(thumbs.getAttribute("margin")),
		screenPadding: 	parseInt(thumbs.getAttribute("screenPadding")), 
		suffix: 	thumbs.getAttribute("suffix")		
	};
	this.makeThumbPaths();
	this.resize();	
	this.makeChildren();
}

ImgList.prototype.clean = function(){
	this.container.empty();
	this.childrenbuilt = false;
	this.isMade = false;
	return this;
};

ImgList.prototype.make	= function(){

	this.container = new Element("div", {
		styles:	{
			width: '100%',
			//height: '100%',
			//top: '0',
			//left:'0',
			//position:'relative',
			//margin: '0 auto 0 auto',
			//backgroundColor:'red',
			//overflow:'scroll',
			zIndex:'1'
		}
	});
	$(document.body).adopt(this.container);
	
	window.addEvent("resize", function(){ if(this.resizeTimeout) clearTimeout(this.resizeTimeout); if(this.childrenbuilt) this.resizeTimeout = setTimeout(function(){this.resize();}.bind(this), 200); }.bind(this));
	this.isMade = true;
	return this;
};

ImgList.prototype.containerResize = function(){

	var height = (Math.ceil(this.items.length/this.cols)*(this.thumbs.height+this.thumbs.margin))+this.baseTop;
	this.container.setStyle("height", height+"px");
};

ImgList.prototype.positionChildren = function(){
	
	var topInc = 0;
	var leftInc = 0;
	var itop = 0;
	z=0;
	this.inResize = true;
	for(var i=0; this.items[i]; i++){	
	
		this.items[i].thumbElement.removeEvent("mouseover", ImgListElementOver);
		this.items[i].thumbElement.removeEvent("mouseout", ImgListElementOut);
		
		if(this.cols<=z || topInc==0){
			itop = (topInc*(this.thumbs.height+this.thumbs.margin))+this.baseTop;//+this.position.center_y;
			topInc++;
			z = 0;
		}
		var ileft = (z*(this.thumbs.width+this.thumbs.margin))+this.position.center_x;
		
		this.items[i].thumbElement.makeAnim({
			left:ileft,
			top:itop,
			width: this.thumbs.width,
			height: this.thumbs.height
		}, 'easeOutExpo', 200);
		
		this.items[i].thumbElement.position = {
			x:ileft,
			y:itop,
			width:this.thumbs.width,
			height:this.thumbs.height
		}
		
		this.items[i].thumbElement.addEvent("animfinish", ImgListElementAnimFinish);
		z++;
	}
	this.containerResize();
}

ImgList.prototype.makeChildren = function(){

	var topInc = 0;
	var leftInc = 0;
	var itop = 0;
	z=0;
	document.viewer.clean();
	for(var i=0; this.items[i]; i++){

		if(this.cols<=z || topInc==0){
			itop = (topInc*(this.thumbs.height+this.thumbs.margin))+this.baseTop;//+this.position.center_y;
			topInc++;
			z = 0;
		}
		var ileft = (z*(this.thumbs.width+this.thumbs.margin))+this.position.center_x;
		
		this.items[i].id = i;
		this.items[i].thumbElement = new Element('img', {
			styles:{
				opacity: 0,
				position:'absolute',
				cursor:'pointer',
				border: '0px solid #000000',
				left: ileft+'px',
				top: itop+'px',
				width: this.thumbs.width+'px',
				height: this.thumbs.height+'px',
				boxShadow: '0px 0px 8px #000',
				borderRadius: '2px'
			}
		});
		this.items[i].thumbElement.parentObject = this;
		this.items[i].thumbElement.position = {
			x:ileft,
			y:itop,
			width:this.thumbs.width,
			height:this.thumbs.height
		};
		
		this.container.adopt(this.items[i].thumbElement);
		
		document.viewer.addItem(this.items[i].image);
		$Anim(this.items[i].thumbElement);
		
		this.items[i].thumbElement.pleft = this.items[i].thumbElement.getPosition().x;
		this.items[i].thumbElement.setStyle('left', (this.items[i].thumbElement.pleft+20)+'px');
		
		this.items[i].thumbElement.set('src', "actions/get_image.php?image="+this.items[i].thumb);
		this.items[i].thumbElement.addEvent("load", function(){
			this.makeAnim({opacity:1.0, left:this.pleft}, 'easeOutExpo', 300);
			
			setTimeout(function(){
				this.addEvent("mouseover", ImgListElementOver);
				this.addEvent("mouseout", ImgListElementOut);
			}.bind(this), 300);
		});
		this.items[i].thumbElement.addEvent("click", function(e){
			document.viewer.open(this.id);
		}.bind(this.items[i]));
		
		
		z++;
	}
	this.childrenbuilt = true;
	this.containerResize();
};

ImgListElementOver = function(e){
	if(!this.parentObject.inResize)
		this.makeAnim({
			width: this.position.width+20,
			height:this.position.height+(Math.round(20/(this.position.width/this.position.height))),
			left: this.position.x-10,
			top: this.position.y-(Math.round(10/(this.position.width/this.position.height)))
		}, 'easeOutExpo', 150);
};

ImgListElementOut = function(e){
	if(!this.parentObject.inResize)
		this.makeAnim({
			width: this.position.width,
			height:this.position.height,
			left: this.position.x,
			top: this.position.y
		}, 'easeOutExpo', 150);
};

ImgListElementAnimFinish = function(e){
	this.parentObject.inResize = false;
	this.addEvent("mouseover", ImgListElementOver);
	this.addEvent("mouseout", ImgListElementOut);
	this.removeEvent("animfinish", ImgListElementAnimFinish);
};

ImgList.prototype.resize = function(){
	
	var size = this.container.getSize();
	
	this.position = {
		width: size.x,
		height: size.y,
		real_center_x: Math.round(size.x/2),
		real_center_y: Math.round(size.y/2)
	};
	
	var z=0;
	this.cols = 0;
	for(var i=0; this.items[i]; i++){
		var size;
		if(i==0) size = this.thumbs.width;
		else size = this.thumbs.margin+this.thumbs.width;
		if(z+size < this.position.width-(this.thumbs.screenPadding*2)){
			z += size;
			this.cols++;
		}else break;
	}
	this.rows = Math.ceil(this.items.length/this.cols);
	
	this.position.center_x = Math.round((this.position.width-((this.thumbs.margin+this.thumbs.width)*this.cols)-this.thumbs.margin+(this.thumbs.screenPadding*2))/2);
	this.position.center_y = Math.round((this.position.height-((this.thumbs.margin+this.thumbs.height)*this.rows)-this.thumbs.margin+(this.thumbs.screenPadding*2))/2);
	
	if(this.childrenbuilt)
		this.positionChildren();
	
};

ImgList.prototype.makeThumbPaths = function(){
	for(var i=0; this.itemContainer[i]; i++){
		var path = this.itemContainer[i].firstChild.nodeValue;
		var thumb = path.split(".");
		var ext = thumb[1];
		this.items[i] = {
			thumb: this.mainPath+thumb[0]+this.thumbs.suffix+"."+thumb[1],
			image: this.mainPath+path
		};
	}
}