previewTitle = null;

Preview = function(p){
	
 	this.element = document.createElement('DIV');
    this.anchors = new Array();
    this.div = 0;
    this.page = 1;
    this.lenght = 0;
    
    //this.coeff = 110;
    this.coeff = (1.1 * imgwidth) + 5;
    this.move = ((footerheight - imgheight)/2);
    this.previewTitleContainer = null;
    this.build = function(search){	
    this.results = search;
	this.lenght = this.results.length;
    	    	
	//delete old previews    
	while(this.element.hasChildNodes())
	this.element.removeChild(this.element.firstChild); 
            
	this.element.setAttribute("id","preview");
	this.element.style.top = this.move - 0 + "px";

	//100 � la somma della larghezza footer-left e footer-right
	this.div = parseInt((document.documentElement.clientWidth - 100) / this.coeff);
	mod = ((document.documentElement.clientWidth - 100)) - (this.div * this.coeff);
	this.element.style.left = - this.coeff * (this.lenght - this.div ) + mod + 8 + "px";

	//prev page button
	var prevPageArrow = document.createElement('IMG');
	prevPageArrow.setAttribute("name", "prevPage");
	prevPageArrow.setAttribute("id", "prevPreview");
	prevPageArrow.setAttribute("class", "noborder");
	prevPageArrow.setAttribute("src", "images/prevPage3.png");
	prevPageArrow.style.height = footerheight + "px";
	
	var prevPage = document.createElement('A');

	prevPage.setAttribute("class","preview");
	prevPage.setAttribute("href","javascript:previews.prevPage()");
	prevPage.onmouseover = function(){ document.images["prevPage"].src = "images/prevPageOn.png"; return true; }
	prevPage.onmouseout = function(){ document.images["prevPage"].src = "images/prevPage3.png"; return true; }        
	prevPage.setAttribute("id","a_prevPreview");
	prevPage.appendChild(prevPageArrow);
   
   //foot left
	var footerLeft = document.getElementById("footer-left");
	footerLeft.appendChild(prevPage);

	//preview images
	var i;
	var left = 30;
	var previewsContainer = document.getElementById("footer");
	this.previewTitleContainer = document.createElement('DIV');
    this.previewTitleContainer.setAttribute("class","previewTitle");
	this.previewTitleContainer.style.left = (document.documentElement.clientWidth - (25 - (100 - (imgwidth /2)))) + "px";
        
	for(i=0; i<this.lenght;i++){
					
		var a = document.createElement('A');
		a.setAttribute("href","javascript:changeStripe("+i+")");
		/*if(browser == "Explorer") a.className = "preview";
		else*/ 
		a.setAttribute("class","preview");          		
		if(i != 0) left += this.coeff;
		a.style.left = left + "px"; 
		a.id = "a_prev"+i;
		this.anchors[i] = a;

		var img = document.createElement('IMG');
		/*if(browser == "Explorer") img.className = "preview";	        
		else*/ 
		img.setAttribute("class","preview");	        
		img.src = "http://open.thumbshots.org/image.aspx?url="+this.results[(this.lenght - 1) - i].unescapedUrl;
		img.id = "prev"+i;    			
		img.style.width = imgwidth + "px";
		img.style.height = imgheight + "px";
		
		var previewTitle = document.createElement('P');
		previewTitle.setAttribute("id","previewTitle"+((this.lenght - 1) - i));
		previewTitle.setAttribute("class","previewTitle");
		previewTitle.style.right = left + "px";
		previewTitle.innerHTML = (this.results[i].title).substring(0,70);
		this.previewTitleContainer.appendChild(previewTitle);

		//var resto = ((this.lenght - 1) % this.div);
		//var fattone = this.div - resto - 1;
		//var f = this.div - ((i+fattone) % this.div) - 1;
		
		//a.onmouseover = new Function("previews.mopen(\"previewTitle\",\""+i+"\");previewTitle.style.right="+((this.coeff * f) + 15)+"+'px';");       
		a.onmouseover = new Function("previews.mopen(\"previewTitle"+i+"\",\""+i+"\")");
		a.onmouseout = function() { previews.mclosetime(); };

		a.appendChild(img);
		this.element.appendChild(a);
		
	}
        
	//next page button
	var nextPageArrow = document.createElement('IMG');
	nextPageArrow.setAttribute("name", "nextPage");
	nextPageArrow.setAttribute("id", "nextPreview");
	nextPageArrow.setAttribute("class", "noborder");
	nextPageArrow.setAttribute("src", "images/nextPage3.png");
	nextPageArrow.style.height = footerheight + "px";
	
	var nextPage = document.createElement('A');

	nextPage.setAttribute("class","preview");       
	nextPage.setAttribute("href","javascript:previews.nextPage()");
	nextPage.onmouseover = function(){ document.images["nextPage"].src = "images/nextPageOn.png";return true; }
	nextPage.onmouseout = function(){ document.images["nextPage"].src = "images/nextPage3.png";return true; }
	nextPage.setAttribute("id","a_nextPreview");    
	
	nextPage.appendChild(nextPageArrow);
	
	//footerRigth
	var footerRight = document.getElementById("footer-right");
	footerRight.appendChild(nextPage);
	
	previewsContainer.appendChild(this.previewTitleContainer);
	
}
    
    this.nextPage = function(){

	    if(this.page < (this.results.length / this.div)){
	    	this.page += 1;
	    	new Effect.Move( this.element, { x: (this.div * this.coeff), y: 0, mode: 'relative', beforeStart: function() { var leftButton = document.getElementById("nextPreview"); leftButton.onclick = function(){ return false } }, afterFinish: function() { var leftButton = document.getElementById("nextPreview"); leftButton.onclick = function(){ } } } );	
			new Effect.Move( this.previewTitleContainer, { x: (this.div * this.coeff), y: 0, mode: 'relative'} );
	    	
	    }   		
    
    }
    
    this.prevPage = function(){
    	
    	if(this.page > 1){
    		this.page -= 1;
   			new Effect.Move(this.element, { x: - (this.div * this.coeff), y: 0, mode: 'relative', beforeStart: function() { var rightButton = document.getElementById("prevPreview"); rightButton.onclick = function(){ return false } }, afterFinish: function() { var rightButton = document.getElementById("prevPreview"); rightButton.onclick = function(){ } } } );
    			new Effect.Move( this.previewTitleContainer, { x: - (this.div * this.coeff), y: 0, mode: 'relative'} );
    	}
    
    }
    
    this.appear = function(){

    	new Effect.Appear('preview', { duration: 1.5 });
    	
    }
    
    var timeout	= 100;
	var closetimer	= 0;
	var prettle	= null;
		
	// open hidden layer
	this.mopen = function(id, j){	
		
		if((this.lenght - j) <= ( this.page * this.div)){
			
			// cancel close timer
			this.mcancelclosetime();
					
			// close old layer...(layer???)
			if(prettle) prettle.style.visibility = 'hidden';
			
			// get new layer and show it		
			prettle = document.getElementById(id);
			
			prettle.style.visibility = 'visible';
			//prettle.innerHTML = this.results[(this.lenght-1) - j].title;
			
		}
			
	}

	// close showed layer
	this.mclose = function(){	
		if(prettle) prettle.style.visibility = 'hidden';
	}
	
	// go close timer
	this.mclosetime = function(){
		closetimer = window.setTimeout(this.mclose, timeout);
	}
	
	// cancel close timer
	this.mcancelclosetime = function(){
		if(closetimer){
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	
	}
	
}

changeStripe = function(j){
	
	if((previews.lenght - j) <= ( previews.page * previews.div)){
		var newPreviewIndex = j;
		var oldPreviewIndex = (previews.lenght - 1) - stripe.shiftindex;
	
		new Effect.Move(previews.anchors[newPreviewIndex].id, {
					  x: 0, y: -previews.move, mode: 'relative', duration: 0.1,
					  afterFinish: function(){ new Effect.Move(previews.anchors[oldPreviewIndex].id, 
					  		{x: 0, y: previews.move, mode: 'relative', duration: 0.1});}});
	
		multipleShift(j);
	
	}

}