var ImageGallery = Class.create();
ImageGallery.prototype = {
	/**
	 * Create an ImageGallery.
	 *
	 */
	 _version : '0.2.2',
	 _thumbnailScrollContainer : null,
	 _scrollIntervalMillis : 40,
	 _scrollInc : 3,
	 _scrollTopMax : null,
	 _btn_scrollUp : null,
	 _btn_scrollDown : null,
	 _scrollTimeout : null,
	 _num_pics : 1,
	 _act_pic : 0,
	 _imageClass : null,

	 initialize	: function ( h_p ) {
	 
		  if (h_p["thumbnailScrollContainer"]) {
		   this._thumbnailScrollContainer = $(h_p["thumbnailScrollContainer"]);
		   this._scrollTopMax = this._thumbnailScrollContainer.scrollHeight - this._thumbnailScrollContainer.getHeight();
		  }

		  if (h_p["scrollIntervalMillis"]) {
		   this._scrollIntervalMillis = h_p["scrollIntervalMillis"];
		  }  
		  if (h_p["scrollInc"]) {
		   this._scrollInc = h_p["scrollInc"];
		  } 
		  if (h_p["btn_scrollUp"]) {
		   this._btn_scrollUp = $(h_p["btn_scrollUp"]);
		  } 
		  if (h_p["btn_scrollDown"]) {
		   this._btn_scrollDown = $(h_p["btn_scrollDown"]);
		  } 	
		  if (h_p["imageClass"]) {
		   this._imageClass = h_p["imageClass"];
		  } 
		  
		  //Event.observe(window, 'load', function (e) {

		Event.observe(this._btn_scrollUp , 'mouseover', function(e) {
			this.scrollUp();
		}.bind(this));
		Event.observe(this._btn_scrollUp , 'mouseout', function(e) {
			this.scrollStop();
		}.bind(this));
		Event.observe(this._btn_scrollDown , 'mouseover', function(e) {
			this.scrollDown();
		}.bind(this));
		Event.observe(this._btn_scrollDown , 'mouseout', function(e) {
			this.scrollStop();
		}.bind(this));	

		if (h_p["num_pics"]) {
			 this._num_pics = h_p["num_pics"];
			 for(i=1; i<=this._num_pics;i++) {
				 $('link_Pic' + i).removeClassName = "PicAktiv";
				 $('Pic' + i).style.display = "none";
			 }
			 $('link_Pic1').addClassName = "PicAktiv";
			 $('Pic1').style.display = "block";
			 this._act_pic = 1;
		}
		
		/*
		if(	this._num_pics <= 3) {
			this._btn_scrollUp.setStyle({'background':'transparent'});
			this._btn_scrollDown.setStyle({'background':'transparent'});
		}
		*/
		
		this._thumbnailScrollContainer.getElementsBySelector('a[class="' + this._imageClass + '"]').each(function(thumbElem, elemIndex) {
			Event.observe(thumbElem, 'click', function(elemX) {
				var currentPic = Number(elemIndex);
				this.switchPic(++currentPic);
			}.bind(this));
		}.bind(this));
			
		  //}.bind(this));	 


	},
	
	scrollDown : function() {
		clearTimeout(this._scrollTimeout);
		if(this._thumbnailScrollContainer.scrollTop >= this._scrollTopMax) { return; }
		this._thumbnailScrollContainer.scrollTop += this._scrollInc;
		this._scrollTimeout = setTimeout("imageGallery.scrollDown()",this._scrollIntervalMillis);
	},
	scrollUp : function() {
		clearTimeout(this._scrollTimeout);
		if(this._thumbnailScrollContainer.scrollTop <= 0) { return; }
		this._thumbnailScrollContainer.scrollTop -= this._scrollInc;
		this._scrollTimeout = setTimeout("imageGallery.scrollUp()",this._scrollIntervalMillis);
	},
	scrollStop : function() {
		clearTimeout(this._scrollTimeout);
	},

	switchPic : function(id) {
		 if(id != this._act_pic) {
				 var queue = Effect.Queue;
				 queue.each(function(e) { e.cancel() });
				 for(i=1; i<=this._num_pics;i++) {
					 //$('link_Pic' + i).className = "";
					 $('link_Pic' + i).removeClassName = "PicAktiv";
					 $('Pic' + i).style.display = "none";
				 }
				 //$('link_Pic' + id).className = "PicAktiv";
				 $('link_Pic' + id).addClassName = "PicAktiv";
				 $('Pic' + id).style.display = 'block';
				 //new Effect.toggle('Pic' + id, 'appear', {duration:0.2});
				 this._act_pic = id;
		 }
	}
	
	
  
  
};