try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}


BAGGERS.Carousel = Class.create();
BAGGERS.Carousel.prototype = {
	initialize: function(element) {
		this.carousel = $(element);

		var options = Object.extend({
				cartSpacing: 0,
				enabled: true,
				onNewPosition: Prototype.emptyFunction,
				beforeNewPosition: Prototype.emptyFunction,
				leftControl: 'prev-arrow-container',
				rightControl: 'next-arrow-container'
			}, arguments[1] || {});
			
		this.onNewPosition			= options.onNewPosition;
		this.beforeNewPosition		= options.beforeNewPosition;
		this.leftControl			= $(options.leftControl);
		this.rightControl			= $(options.rightControl);
		this.enabled				= options.enabled;
		this.carts					= this.carousel.getElementsByTagName('li');
		this.cartSpacing			= options.cartSpacing;
		this._x						= $(this.carts[0]).getWidth() + options.cartSpacing * 2;
		//Listen for input.
		Event.observe(this.leftControl, 'click', this.updateCarousel.bindAsEventListener(this,-1));
		Event.observe(this.rightControl, 'click', this.updateCarousel.bindAsEventListener(this,1));
		this.enableMouseOvers();
	},
	
	enableMouseOvers: function() {
		for(var i=0; i<this.carts.length; i++) {
			Event.observe(this.carts[i], 'mouseover', this.showDetails.bindAsEventListener(this),false);
			Event.observe(this.carts[i], 'mouseout', this.hideDetails.bindAsEventListener(this),false);
		}	
	},
		
	updateCarousel: function(e,delta) {
		new Effect.MoveBy(this.carousel, 0, this._x * delta, {
				duration: 0.5,
				queue: {
					position: 'end',
					scope: 'carousel',
					limit: 5
				},
				afterFinish: function() {
					this.removeEndCarts(delta);
					this.onNewPosition(delta);
					this.enableMouseOvers();
				}.bind(this),
				beforeSetup: function() {
					this.cloneEndCarts(delta);
					this.beforeNewPosition(delta);
				}.bind(this)
			});
	},
	
	cloneEndCarts: function(delta) {
		if(delta == -1) {
			var cart = this.carts[0].cloneNode(true);
			this.carousel.appendChild(cart);				
		} else {
			var cart = this.carts[this.carts.length - 1].cloneNode(true);
			this.carousel.insertBefore(cart,this.carousel.firstChild);
			this.carousel.style.left = (this._x * -1) + 'px';	
		}
	},
	
	removeEndCarts: function(delta) {
		if(delta == 1) {
			Element.remove(this.carts[this.carts.length - 1]);
		} else {
			this.carousel.removeChild(this.carts[0]); 
			this.carousel.style.left = 0 + 'px';
		}
	},
	
	showDetails: function(e) {
		$('bike-magnifier-content').update('');
		element = Event.element(e);
		while(element.tagName != 'LI')
			element = element.parentNode;
			
		var bikeid = element.id.split("_")[1];
		var _x  = (!element.previousSiblings().length) ? '500px' : '570px';
		$('bike-magnifier').setStyle({
			display: 'block',
			top: '0px',
			left: _x
		});
		
		new Ajax.Updater({ success: 'bike-magnifier-content' }, '/ajax/magnify.php', {
		  parameters: { bikeid: bikeid }
		});
	},
	
	hideDetails: function() {
		$('bike-magnifier').setStyle({
			display: 'none'
		});
	}
}

BAGGERS.details = {
	show: function(e) {
		var element = Event.element(e);
	
		var descid = element.id.split("_")[1]
		var desc = $('detail-desc_' + descid).innerHTML
		$('bike-details-desc').update(desc);
		
		var _x = element.getStyle('left');
		    _x = _x.substring(0,_x.length - 2) - 10 + 'px';
		var _y = element.getStyle('top');
		    _y = (_y.substring(0,_y.length - 2)*1) + 'px';

		$('bike-details-container').setStyle({
			top: _y,
			left: _x,
			display: 'block'
		});
	},
	
	hide: function(e) {
		var element = Event.element(e);
		var target  = (e.relatedTarget) ? e.relatedTarget : e.toElement;
		while (target.id != 'bike-details-container' && target.nodeName != 'BODY')
				target = target.parentNode;
		if (target.id == 'bike-details-container') return;
		
		$('bike-details-container').hide();
	}
};