
Preview_new = function(p){
    
    footerwidth=clientW - 20
    
    var imagecontwidth = footerwidth - 50 - 50 //footer_left and footer_right width
    this.page = 1;
    this.element = document.createElement('DIV');
    this.element.setAttribute("id","previewHead");
    
    this.previews_images = new Array();
    
    this.titleContainer = document.getElementById("previewTitleContainer");
    
    this.titleHead = document.createElement('DIV');
    this.titleHead.setAttribute("id","previewTitleHead");
    
    this.titleContainer.appendChild(this.titleHead);
    
    this.margin=0;
    this.lenght=0;
	
    this.build = function(search){	
        
        //risultati della ricerca
        this.results = search;
        this.lenght = this.results.length;
	    var imgwidth = 100;
        
        this.previewsWidth = imgwidth + 10 + 5; //imgwidth + border + space
        this.numberOfImage = parseInt(imagecontwidth / this.previewsWidth);
        
        //posizione di partenza delle immagini
        //this.element.style.left = - (this.previewsWidth) * (this.lenght - this.numberOfImage )  + "px";
        //this.titleHead.style.left = - (this.previewsWidth) * (this.lenght - this.numberOfImage )  + "px";
        this.element.style.left = 0 + "px";
        this.titleHead.style.left = 0 + "px";
        
        this.titleContainer.style.width = this.numberOfImage * this.previewsWidth + 85 +"px";
        
        this.setArrowLateralMargin();
        
        this.drawLeftButton();
        
        this.drawImages();
        
        this.drawRightButton();
		
		this.setImageContainer();
		
    }
    
    this.setImageContainer = function(){
        
        var imageContainer = document.getElementById("imagecont");
        imageContainer.style.width = this.numberOfImage * this.previewsWidth + "px";
        imageContainer.style.top = -10+"px";
        imageContainer.appendChild(this.element);

    }
    onNextPage = false;
    this.nextPage = function(){
        
	    if(this.page < (this.results.length / this.numberOfImage) && !onNextPage){
	    	this.page += 1;
	    	new Effect.Move( this.element, { x: - (this.numberOfImage * this.previewsWidth), y: 0, mode: 'relative', beforeStart: function() { onNextPage= true; var leftButton = document.getElementById("nextPage"); leftButton.onclick = function(){ return 5 } }, afterFinish: function() { onNextPage= false; var leftButton = document.getElementById("nextPage"); leftButton.onclick = function(){ } } } );
			new Effect.Move( this.titleHead, { x: - (this.numberOfImage * this.previewsWidth), y: 0, mode: 'relative'} );
	    	
	    }   		
       
    }
    
    onPrevPage = false;
    this.prevPage = function(){
    	
    	if(this.page > 1 && !onPrevPage){
    		this.page -= 1;
	    	new Effect.Move( this.element, { x: (this.numberOfImage * this.previewsWidth), y: 0, mode: 'relative', beforeStart: function() { onPrevPage= true; var leftButton = document.getElementById("prevPage"); leftButton.onclick = function(){ return false } }, afterFinish: function() { onPrevPage= false; var leftButton = document.getElementById("prevPage"); leftButton.onclick = function(){ } } } );
    	    new Effect.Move( this.titleHead, { x: (this.numberOfImage * this.previewsWidth), y: 0, mode: 'relative'} );
    	}
    
    }
   
    
    this.drawLeftButton = function(){
        var leftButton = document.getElementById("prevPage");
        leftButton.onmouseover = function(){ document.images["prevPage"].src = "images/back_on.png"; return true; }
        leftButton.onmouseout = function(){ document.images["prevPage"].src = "images/back_off.png"; return true; }     
    }
    
    this.drawRightButton = function(){
        var rightButton = document.getElementById("nextPage");
        rightButton.onmouseover = function(){ document.images["nextPage"].src = "images/next_on.png"; return true; }
        rightButton.onmouseout = function(){ document.images["nextPage"].src = "images/next_off.png"; return true; }
    }
    
    this.drawImages = function(){
        
        var left = 0;
        var lenght = this.results.length;
        
        for(i=0; i<lenght; i++){
			
			//img container
			var container = document.createElement('DIV');
			container.setAttribute("class","preview"); 
			if(i != 0) left += this.previewsWidth;
			container.style.left = left + "px"; 
			container.id = "preview"+i;
			
			//thumbshot
			var thumbshot = document.createElement('IMG');
			thumbshot.setAttribute("class","preview");
			thumbshot.setAttribute("id","thumbshot_"+i)
			//thumbshot.src = "http://open.thumbshots.org/image.aspx?url="+this.results[(lenght - 1) - i].unescapedUrl;
		    
		    thumbshot.src = "http://open.thumbshots.org/image.aspx?url="+this.results[i].unescapedUrl;
		    
		    if(browser != "Explorer") {
				thumbshot.addEventListener('mouseover', this.processMouseOver, false);
				thumbshot.addEventListener('mouseout', this.processMouseOut, false);
			}else {
				thumbshot.attachEvent('onmouseover', this.processMouseOver);
				thumbshot.attachEvent('onmouseout', this.processMouseOut);
			}
			
			thumbshot.setAttribute('onclick',"changeStripe("+i+")");
		    container.appendChild(thumbshot);
			
			var title = document.createElement('DIV');
		    title.setAttribute("class","preview_title");
		    title.setAttribute("id","preview_title_"+i);
			title.style.left = left + "px";
			title.style.opacity=0;
			title.style.filter="alpha(opacity = 0)";
			title.innerHTML = (this.results[i].title).substring(0,60);
			this.titleHead.appendChild(title);

		    this.previews_images.push(container);
		    this.element.appendChild(container); 
		   
		}
        
        //this.previews_images[lenght-1].style.background="#DF5555";
        this.previews_images[0].style.background="#BB2211";
    }
    
    this.processMouseOver = function(e){
       
        if (!e) e = window.event;
        var target = e.target || e.srcElement;
        
        var index = target.id.split("_")[1];

        new Effect.Appear('preview_title_'+index, {duration:0.1, to:1.0});
        
        new Effect.Move( target.parentNode , { x: 0, y: -3, mode: 'relative', duration: 0 } )
        
    }
    
    this.processMouseOut = function(e){
        
        if (!e) e = window.event;
        var target = e.target || e.srcElement;
        
        var index = target.id.split("_")[1];
        
        new Effect.Appear('preview_title_'+index, {duration:0.3, to:0});

        new Effect.Move( target.parentNode , { x: 0, y: 3, mode: 'relative', duration: 0 } )
    
    }
    
    
    this.setArrowLateralMargin = function(){
        
        //margine delle frecce
        var lateral_footer_width = (footerwidth - (this.numberOfImage * this.previewsWidth))/2
        this.margin = (lateral_footer_width - 40) - 5 //40=arrow image widt; 5 margin
        var footer_left = document.getElementById("footer_left_new");
        footer_left.style.marginLeft = this.margin + "px" ;
        var footer_right = document.getElementById("footer_right_new");
        footer_right.style.marginRight = this.margin + "px" ;

    }

    
}

changeStripe = function(j){
	
	//if((previews.lenght - j) <= ( previews.page * previews.numberOfImage)){
		var newPreviewIndex = j;
		//var oldPreviewIndex = (previews.lenght - 1) - stripe.shiftindex;
		var oldPreviewIndex = stripe.shiftindex;
		var previous = previews.previews_images[oldPreviewIndex];
		var current =  previews.previews_images[newPreviewIndex];
		
		current.style.background="#BB2211";
		previous.style.background="#93a5c5";
		
		multipleShift(j);
	
	//}

}

