/*
<div id="firsGal" class="myGallery">
		<div class="myGalleryThumbs"></div>
		<div class="myGalleryImage"></div>
		<div class="myGalleryDescription"></div>
		<a href="#" class="myGalleryLeftB"></a>
		<a href="#" class="myGalleryRightB"></a>
		
		<div class="galleryElement">
			<div class="photoInfo"></div>
			<img src="assets/<?=$r->image?>">
		</div>

</div>
<script type="text/javascript">new myGallery("firsGal");</script>
*/

var myGallery = Class.create();
myGallery.prototype = {
	
	initialize: function(id){
		
		this.galleryContainer = $(id);
		//this.galleryContainer.down(".myGalleryDescription").setOpacity("0.5");
		this.galleryElements = this.galleryContainer.select(".galleryElement");
		
		if (this.galleryElements == 0){
			this.galleryContainer.remove();
			return false;
		}//end if
		
		this.galleryThumbs = [];
		this.thumbPosition = 0;
		this.max = 0;
		this.effectInProgress = false;
		
		this.createThumbs();
		if (this.galleryElements.length > 3){
			this.registerButtons();
		}//end if
		this.registerThumbs();
		this.showThumb(this.galleryThumbs[0]);
	},
	
	createThumbs: function(){
		var i = 0;
		this.galleryElements.each(function(el){
			
			var div = document.createElement("div");
			div.className = "myGalleryThumb";
			Element.extend(div);
			
			var divImg = document.createElement("div");
			Element.extend(divImg);
			
			var divSelector = document.createElement("div");
			Element.extend(divSelector);
			divSelector.addClassName("myGallerySelector")
			
			var img = document.createElement("IMG");
			img.src = el.down("img").src;
			Element.extend(img);
			
			divImg.appendChild(img);
			div.appendChild(divImg);
			div.appendChild(divSelector);
			
			div.galleryElement = el;
			
			
			
			div.setStyle({
				left: ((i*210) + 10)+"px"
			});
			
			this.max = (i*210) + 10;
			
			this.galleryThumbs.push(div);
			
			this.galleryContainer.down(".myGalleryThumbs").appendChild(div);
			i++;
			
		}.bind(this));
	},
	
	registerButtons: function(){
		this.galleryContainer.down(".myGalleryLeftB").observe("click", function(e){
			if (!this.effectInProgress){
				this.effectInProgress = true;
				this.counter = 0;
				this.galleryThumbs.each(function(el){
					var newLeft = el.positionedOffset().left-210;
					if (newLeft < 0){
						//newLeft = this.max;
					
						new Effect.Morph(el, {
							style:'left:'+newLeft+"px",
							duration: 0.3,
							afterFinish: function(){
								el.setStyle({
									left: this.max+"px"
								});
								if (this.counter+1 == this.galleryThumbs.length){
									this.effectInProgress = false;
								}//end if
								this.counter++;
							}.bind(this)
						});
					
					}else{
						new Effect.Morph(el, {
							style:'left:'+newLeft+"px",
							duration: 0.3,
							afterFinish: function(){
								if (this.counter+1 == this.galleryThumbs.length){
									this.effectInProgress = false;
								}//end if
								this.counter++;
							}.bind(this)
						});
					}
					
				}.bind(this));
			}//end if

		}.bind(this));
		
		this.galleryContainer.down(".myGalleryRightB").observe("click", function(e){
			if (!this.effectInProgress){
				this.effectInProgress = true;
				this.counter = 0;
				this.galleryThumbs.each(function(el){
					var newLeft = el.positionedOffset().left+210;
					if (newLeft > this.max){
					
						el.setStyle({
							left: "-200px"
						});
					
						new Effect.Morph(el, {
							style:"left: 10px",
							duration: 0.3,
							afterFinish: function(){
								if (this.counter+1 == this.galleryThumbs.length){
									this.effectInProgress = false;
								}//end if
								this.counter++;
							}.bind(this)
						});
					}else{
						new Effect.Morph(el, {
							style:'left:'+newLeft+"px",
							duration: 0.3,
							afterFinish: function(){
								if (this.counter+1 == this.galleryThumbs.length){
									this.effectInProgress = false;
								}//end if
								this.counter++;
							}.bind(this)
						});
					}
				}.bind(this));
				
			}//end if

		}.bind(this));
		
	},//end register buttons
	
	registerThumbs: function(){
		this.galleryThumbs.each(function(el){
			el.observe("click", function(e){
				this.showThumb(el);
			}.bind(this));
		}.bind(this));
	},//end registerThumbs
	
	showThumb: function(thumb){
		try{
			this.galleryContainer.down(".myGalleryThumbSelected").removeClassName("myGalleryThumbSelected");
			this.galleryContainer.down(".myGallerySelectedIndicator").removeClassName("myGallerySelectedIndicator");
		}catch(e){}
		
		thumb.down(".myGallerySelector").addClassName("myGallerySelectedIndicator");
		thumb.addClassName("myGalleryThumbSelected");
		
		this.galleryContainer.down(".myGalleryDescription").innerHTML = thumb.galleryElement.down("div").innerHTML;
		
		this.galleryContainer.down(".myGalleryImage").setStyle({
			backgroundImage:"url("+thumb.galleryElement.down("img").src+")"
		});
		
	}
	
	
};//end prototype