/**
 * Thumbnail slider for Günter & Kuster, Zürich
 *
 * (c) silverfish ag, zürich, 2010 
 */

var slider = {

	el    : '',	 // the element
	margin: 5,	 // margin between the images
	start : 137, // left border
	end   : 853, // right border
	step  : 400, // one step in px
	x1	  : 137, // min width (from the left)	
	x2	  : 0,	 // max width (from the left)		
  	
  	init: function() {
  	
  		// get container width
  		var images = Ext.select('.thumbnails img');
  		var width  = 0;
  		  		
  		for (var i = 0; i < images.elements.length; i++) {
  			width += Ext.get(images.elements[i]).getWidth() + this.margin;
  		}
  		
  		this.el = Ext.get('thumbnails');
	  	this.x2 = this.end - this.el.getWidth();
  	},
  	
  	left: function() {
				
	 	if ((slider.el.getX() + slider.el.getWidth()) >= slider.end) {
			
			var xpos = slider.el.getX() - slider.step;
	
			if (slider.el.getX() + slider.el.getWidth() - slider.step < slider.end) {
				var xpos = slider.x2;
			}
		
			slider.el.stopFx().syncFx().shift({x: xpos, easing: 'easeOut', duration: .5}).sequenceFx();		
		} 
  	},
  
  	right: function() {
		
		if (slider.el.getX() <= slider.start) {
			
			var xpos = slider.el.getX() + slider.step;
	
			if (slider.el.getX() + slider.step >= slider.start) {
				var xpos = slider.x1;
			}
			
			slider.el.stopFx().syncFx().shift({x: xpos, easing: 'easeOut', duration: .5}).sequenceFx();		
		} 
  	},
  	
  	change: function() {
  		
  		Ext.get('image-loader').show();
  		Ext.get(this).radioClass('active');
  		
  		// get date & src
  		var data = Ext.get(this.id).id.split('__');
  		var date = Ext.get(this).getAttribute('title');

  		// create new image object
  		var img = new Image();
  		img.src = Ext.get(this).id;
		
		if (Ext.isIE6 || Ext.isIE7) {
			Ext.get('image').fadeIn({endOpacity: 1, duration: 0.75}).update('<img src="'+img.src+'" width="900" height="480" alt="" title="" />');
			Ext.get('image-loader').fadeOut({endOpacity: 0, duration: 0.25});
			Ext.get('caption-date').update(date);
		} else {
			img.onload = function(){
				
				Ext.get('image-loader').fadeOut({endOpacity: 0, duration: 0.25});
				
				// update image container
				Ext.get('image').stopFx().fadeIn({endOpacity: 1, duration: 0.75}).update('<img src="'+img.src+'" width="900" height="480" alt="" title="" />');
	  			
	  			// update caption date
	  			Ext.get('caption-date').update(date);
			};
		}

  	}		
}