Element.implement({
  hide: function(){
    this.setStyle("display", "none");
  },
  show: function(){
    this.setStyle("display", "block");
  },
  invisible: function(){
    this.setStyle("visibility", "hidden");
  },
  visible: function(){
    this.setStyle("visibility", "visible");
  }
});

function change_image(link_id){
	sc.imgs.each(function(el_img){
		img = el_img.getElement('img');
		img.hide();

		if(img.id == link_id)
		{
			img.show();
		}
	});

}
var myshowcase = new Class({
	offset: 100,
	pos: 0,
	page: 1,

	initialize: function(thumbs, items, prev, next) {
		this.thumbs = $$(thumbs);
		this.thumbs_count = this.thumbs.length;

		thumbs_max_width = 0;

		this.thumbs.each(function(el){
			thumbs_max_width += el.getSize().x;
		});
		
		this.pages = Math.ceil(thumbs_max_width / this.offset);
		this.thumbs_max_width = thumbs_max_width;

		this.thumbs_scroll = new Fx.Scroll(items, {
			wait: false,
			offset:{'x':0, 'y':0},
			duration: 1500,
			transition: Fx.Transitions.Quad.easeOut
		});

		this.prev_button = $(prev);
		this.next_button = $(next);

		this.prev_button.addEvent('click', this.move.pass(-1, this));
		this.next_button.addEvent('click', this.move.pass(1, this));

		this.toggle_buttons();
	},

	bindImages: function(images)
	{
		this.imgs = $$(images);
		this.imgs_count = this.imgs.length;

		this.thumbs.each(function(el){
			link = el.getElement('a');
			link_id = link.href.split("#")[1];
			link.removeEvents("click").addEvent('click', change_image.pass(link_id));
		});
	},

	setOffset: function(offset)
	{
		this.offset = offset;
		this.pages = Math.ceil(this.thumbs_max_width / this.offset);
		this.toggle_buttons();
	},

	move: function(direction) {
		pos = this.pos;
		page = this.page;
		if(direction == 1 && this.pages > this.page)
		{
			page = this.page +1;
			pos = this.pos + this.offset;
		}
		else if(direction == -1 && this.page > 1)
		{
			page = this.page -1;
			pos = this.pos - this.offset;
		}

		this.thumbs_scroll.start(pos);	
		
		this.page = page;
		this.pos = pos;

		this.toggle_buttons();
	},

	toggle_buttons: function() {
		if(this.page == 1 && this.pages == 1)
		{
			this.prev_button.invisible();
			this.next_button.invisible();
		}
		else if(this.page == this.pages)
		{
			this.prev_button.visible();
			this.next_button.invisible();
		}
		else if(this.page > 1)
		{
			this.prev_button.visible();
			this.next_button.visible();
		}
		else
		{
			this.prev_button.invisible();
			this.next_button.visible();
		}
	}
});