//for Gally in Tabs only

var GalleryTab = Class.create({
	initialize: function(arr,container,shownImages,options) {  
	    this.galleryArray=arr;
	    this.galleryContainer = $(container); 
		this.visibleImages=shownImages; //max visible Teasers
		this.divArr=[];
		this.opts = {
			step:136,  //Stepsize (Image width + margin right)
			leftPos:0,  
			imgNr:0,
			prevInactive:false,    
			nextInactive:false
        };
		Object.extend(this.opts, options);	

		/* ## INIT GALLERY ## */
		this.holder_div = this.galleryContainer.down('.contentOuterDiv');
		this.content_div = this.galleryContainer.down('.contentInnerDiv');
		this.content_div.style.width = (this.galleryArray.size()* this.opts.step)+ 'px';

	
		 //Create HTML tags from gallery array
		 for(i=0;i<this.galleryArray.size(); i++){
			//Container
			this.item_div = document.createElement('div');
			Element.extend(this.item_div);
			this.content_div.appendChild(this.item_div);
			this.item_div.addClassName('teaser'); 
			this.divArr.push(this.item_div);
			
			//Headline h2 
			this.headline= document.createElement('h2');
			this.item_div.appendChild(this.headline);
			this.headline.innerHTML=this.galleryArray[i][2];
			
			//Thumbnail img 
			this.image= document.createElement('img');
			this.item_div.appendChild(this.image);
			this.image.src=this.galleryArray[i][1];

			// Copytext p
			this.copy= document.createElement('p');
			this.item_div.appendChild(this.copy);
			this.copy.innerHTML=this.galleryArray[i][0];
			
			//Link a
			this.target= document.createElement('a');
			Element.extend(this.target);
			this.item_div.appendChild(this.target);
			this.target.href=this.galleryArray[i][3];
			this.target.addClassName('txt_link'); 
			this.linktext=document.createTextNode("mehr...");
			Element.extend(this.linktext);
			this.target.appendChild(this.linktext);
		  };
	
	
	    /*##EVENTHANDLING ##*/	
		// Hovereffect
		 this.divArr.each(function(obj){
			Event.observe(obj,'mouseover',this.DivHover.bindAsEventListener(this));  
		 }.bind(this));
		 this.divArr.each(function(obj){
			Event.observe(obj,'mouseout',this.DivUnhover.bindAsEventListener(this)); 
		 }.bind(this));
		 
		  this.divArr.each(function(obj){
			Event.observe(obj,'mouseup',this.DivLocation.bindAsEventListener(this)); 
		 }.bind(this));


     	// Gallery navigation
		this.prev_button = this.galleryContainer.down('.prevbt');
		this.next_button = this.galleryContainer.down('.nextbt');
		
		Event.observe(this.prev_button,'mouseup',this.ScrollLeft.bindAsEventListener(this)); 
		Event.observe(this.next_button,'mouseup',this.ScrollRight.bindAsEventListener(this)); 
	    Event.observe(this.next_button,'mouseover',this.NavHover.bindAsEventListener(this)); 
		Event.observe(this.next_button,'mouseout',this.NavUnhover.bindAsEventListener(this))
		Event.observe(this.prev_button,'mouseover',this.NavHover.bindAsEventListener(this)); 
		Event.observe(this.prev_button,'mouseout',this.NavUnhover.bindAsEventListener(this))
		
		
		/* GALLERY START POSITION (first item active) */
		this.holder_div.scrollLeft=this.opts.leftPos;
		this.opts.imgNr=this.visibleImages;
		this.NavButtonChange(this.opts.imgNr);
		
    },
	
	 /*##FUNCTIONS ##*/	
    // Teaser Hover/Click Events
	DivHover: function(evt){	
		var teaser =Event.element(evt).up('div');
		teaser.addClassName('reitergallery_hover'); 
	},
	
	DivUnhover: function(evt){
		var teaser =Event.element(evt).up('div');
		teaser.removeClassName('reitergallery_hover'); 
	},
		
	DivLocation: function(evt){	
	    var evt= this.divArr.indexOf(Event.element(evt).up('div'));
	    document.location= this.galleryArray[evt][3];
	},
	
	//Gallery Navigation 
	NavHover:function (btn){
		var button=Event.element(btn);
		
		if((!this.opts.nextInactive)&&(button.hasClassName('nextbt'))){
	      this.next_button.src="/psources/img/modules/next_button_hover.gif";
		  this.prev_button.next('.gallery_navtext').down('span',1).style.color="#fabf01";
		}else  if((!this.opts.prevInactive)&&(button.hasClassName('prevbt'))){
		   this.prev_button.src="/psources/img/modules/prev_button_hover.gif";
		   this.prev_button.next('.gallery_navtext').down('span',0).style.color="#fabf01";
	    };
	},
	
	NavUnhover:function (btn){	
		var button=Event.element(btn);

	    if((!this.opts.nextInactive)&&(button.hasClassName('nextbt'))){
	       this.next_button.src="/psources/img/modules/next_button.gif";
		   this.prev_button.next('.gallery_navtext').down('span',1).style.color="#999999";
		}else  if((!this.opts.prevInactive)&&(button.hasClassName('prevbt'))){
	 	   this.prev_button.next('.gallery_navtext').down('span',0).style.color="#999999";
		   this.prev_button.src="/psources/img/modules/prev_button.gif";
	   }else{
		   this.NavButtonChange(this.opts.imgNr);
	   };
	},
	
	ScrollLeft:function (){	  
		if(this.opts.imgNr> this.visibleImages){	    
  			this.holder_div.scrollLeft=this.opts.leftPos-this.opts.step;
  			this.opts.leftPos-=this.opts.step;
			this.opts.imgNr-=1;
			this.NavButtonChange(this.opts.imgNr);
		 }else{
			this.NavButtonChange(this.opts.imgNr);
		};
		
		 this.next_button.style.cursor="pointer";
		 this.next_button.src="/psources/img/modules/next_button.gif";	
		 this.prev_button.next('.gallery_navtext').down('span',1).style.color="#999999"; 
	},
	
	ScrollRight: function(){	
	 	if(this.opts.imgNr < this.galleryArray.size()){
	  		this.holder_div.scrollLeft=this.opts.leftPos+this.opts.step;
  			this.opts.leftPos+=this.opts.step;
			this.opts.imgNr+=1;
			this.NavButtonChange(this.opts.imgNr);
		}else{
			this.NavButtonChange(this.opts.imgNr);
		};
		this.prev_button.style.cursor="pointer";
		this.prev_button.src="/psources/img/modules/prev_button.gif";	
		this.prev_button.next('.gallery_navtext').down('span',0).style.color="#999999"; 
	},
	
	NavButtonChange: function(num) {
		   // no navigation buttons needed
		if (this.visibleImages >= this.galleryArray.size()){
		   if (this.galleryContainer.down('div.gallery_navigation_container').down('div').hasClassName('optionalLink')){
			   this.galleryContainer.down('.gallery_navigation').style.display="none";
		   }else {
				this.galleryContainer.down('.gallery_navigation_container').style.display="none";
		   };
		};
		 // last Image 
		if (num == this.galleryArray.size()){
		   this.next_button.src="/psources/img/modules/next_button_off.gif";
		   this.next_button.style.cursor="auto";	       
		   this.next_button.previous('.gallery_navtext').down('span',1).style.color="#cccccc";
		   this.opts.nextInactive=true;
	    }else {
		   this.opts.nextInactive=false;
		};
		
		// first Image 
		if (num == this.visibleImages ){
		   this.prev_button.src="/psources/img/modules/prev_button_off.gif";
		   this.next_button.previous('.gallery_navtext').down('span',0).style.color="#cccccc";
		   this.prev_button.style.cursor="auto";
		   this.opts.prevInactive=true;
	    }else{
		   this.opts.prevInactive=false;
		};
	}
});