var Gallery = Class.create({
  initialize: function(holder, name, data, display, init) {
	
	this.holder = holder; //gallery
	this.name = name;		//highlight
	this.length = data['length'];	//
	this.display = display;			//5
	this.items = data['items'];
	
	(init) ? this.create() : this.steps = Math.ceil(this.length/this.display);
	this.width = $(this.name+"-thumbnail-0").getStyle('width').split("px").join('');
	
  },
  
  create: function(){
	 
  	this.reset();
    this.steps = Math.ceil(this.length/this.display);
  	var target = $(this.name+'-thumbs');
  	var tmp_ul = new Element('ul', { 'id': this.name + '-items' });
  	
  	var tmp_li;
  	var tmp_a;
  	var tmp_img;
  	for (var i = 0; i < this.length; i++){
  		tmp_img = new Element('img', { 'src': this.items[i].thumbnail });
  		tmp_a = new Element('a', { href: "javascript:"+this.holder + ".select("+i+");" }).update(tmp_img);
  		tmp_li = new Element('li', { 'id': this.name + "-thumbnail-"+i }).update(tmp_a)
  		tmp_ul.appendChild(tmp_li);
  	}
  	target.appendChild(tmp_ul);
  	this.select(0);
  },
  
  preload: function(holder, name, data, display){
  	this.holder = holder;
    this.name = name;
    this.length = data['length'];
    this.display = display;
    this.items = data['items'];
    
    this.steps = Math.ceil(this.length/this.display);
  },
  
  select: function(id) {
  	if (this.current != id){
  		this.current = id;
	  	this.removeall();
	  	this.load(id);
  	}
  },
  
  load: function(id) {
  	var target = $(this.name + "-image");
  	var image = new Element("img", { 'id': this.name + "-image-" + id });
  	image.setStyle({ 'display': 'none' });
  	image.onload = function (img){
		Effect.Appear(image, { duration: 0.5 });
  	};
  	
  	var tmp_a = new Element("a", { href: this.items[id].link }).update(image);
  	target.appendChild(tmp_a);
  	if ($(this.name+'-description')) var description = $(this.name+'-description').update(this.items[id].description);
  	if ($(this.name+'-count')) var count = $(this.name+'-count').update( (this.current+1)+"/"+this.length );
  	image.src = this.items[id].image;
  	
  	this.thumbnail(id);
  },
  
  thumbnail: function(id){
  	var thumbnails = $(this.name+'-thumbs').getElementsByTagName('li');
  	var target;
  	
  	for (i = 0; i < thumbnails.length; i++ ){
  		if (id == i){
  			$(this.name+'-thumbnail-'+i).addClassName('selected');
  		} else {
  			$(this.name+'-thumbnail-'+i).removeClassName('selected');
  		}
  	}
  },
  
  current: -1,
  
  removeall: function(){
  	var target = $(this.name + "-image");
  	var images = target.getElementsByTagName("img");
  	for (var i = 0; i < images.length; i++){
  		var str = images[i].id;
  		var n = str.split(this.name + "-image-").join("");
  		if (n != this.current) Effect.Fade(images[i], { duration: 0.5, afterFinish: this.remove.bindAsEventListener(this) });
  	}
  },
  
  remove: function (target){
  	var image = target.element.parentNode;
  	if (target.element != null) image.removeChild(target.element);
  },
  
  step: 0,
  
  next: function (){
  	if (this.step < (this.steps-1)){
  		this.step++;
	  	var target = $(this.name + '-items');
	  	var targetx = this.step * ( (this.display*this.width) + ((this.display)*1) );
	  	new Effect.Move(target, { x: -targetx, y: 0, mode: 'absolute', duration: 0.5 });
  	}
  },
  
  prev: function (){
  	if (this.step > 0){
  		this.step--;
	  	var target = $(this.name + '-items');
	  	var targetx = this.step * ( (this.display*this.width) + ((this.display)*1) );
	  	new Effect.Move(target, { x: -targetx, y: 0, mode: 'absolute', duration: 0.5 });
	 }
  },
  
  nextImage: function (){
  	var n;
  	if (this.current < (this.length-1)){
  		n = (this.current == -1) ? 1 : (this.current + 1);
  	} else {
  		n = 0;
  	}
  	this.select(n);
  },
  
  prevImage: function (){
  	var n;
  	if (this.current > 0){
  		n = (this.current == -1) ? (this.length-1) : (this.current - 1);
  	} else {
  		n = (this.length-1);
  	}
  	this.select(n);
  },
  
  reset: function(){
  	this.step = 0;
  	this.steps = 0;
  	this.current = -1;
  	//this.removeall();
  	$(this.name+'-thumbs').update('');
  	$(this.name + "-description").update('');
  },
  
  show: function(){
	var target = $(this.name + '-dock');
	if (this.dockTween) this.dockTween.cancel();
	
	this.dockTween = new Effect.Parallel([
		new Effect.Appear(target, { sync: true, duration: 0.5 }),
		new Effect.Move(target, { sync: true, mode:'absolute', y:282, duration: 0.5 })
	], { 
		duration: 0.5
	});
	
  },
  
  hide: function(){
	var target = $(this.name + '-dock');
	
	if (this.dockTween) this.dockTween.cancel();	
	this.dockTween = new Effect.Parallel([
		new Effect.Fade(target, { sync: true, duration: 0.5 }),
		new Effect.Move(target, { sync: true, mode:'absolute', y:324, duration: 0.5 })
	], { 
		duration: 0.5
	});
  }
  
  
});