// Used car gallery
UsedCarGallery = Behavior.create({
	initialize : function () {
		var placeholder = null;
		var selected_thumb = null;
		var index = 0;
		
		if ( ! $( "imagegallery" ) ) return false;
		if ( ! $$( "div.placeholder div.picture" )[ 0 ] ) return false;
		if ( ! $$( "div.thumbs a" )[ 0 ] ) return false;
		
		this.placeholder =  $$( "div.placeholder" )[ 0 ];

		//Place thumbs and pictures in arrays
		this.pictures = this.element.select( "div.placeholder div.picture" );
		this.thumbs = this.element.select( "div.thumbs a");

		//Selected thumb
		this.selected_thumb = $$( "div.thumbs a.selected" )[ 0 ];

		//Show selected picture
		this.selected_thumb ? this.showPic( this.selected_thumb ) : this.showPic( this.thumbs[0] );
		
	}, 
	onclick: function( e ) {
		var origin = Event.element( e );
		
		if ( origin.tagName.toLowerCase() == "img" && origin.up( "div.thumbs" ) ) {
			var linkobj = origin.up("a");
			if ( linkobj )
				return this.showPic( linkobj );
		}
	},
	showPic : function ( pic ) {
		
		//Get index of the clicked thumb
		this.thumbs.each( function ( thumb, index ) {
			if ( thumb == pic )
				this.index = index;
		}.bind(this));
		
		//Hide all
		this.pictures.invoke( "hide" );
		
		//Show the chosen picture
		this.pictures[ this.index ].show();
		
		//Deselect thumb
		this.thumbs.invoke("removeClassName", "selected" );
		
		//Select thumb
		this.selected_thumb = pic;
		pic.addClassName( "selected" );
	}

});	

Event.addBehavior({
	'div#imagegallery' : UsedCarGallery
});


/*
 *	Product gallery
 *	
 *	Generates gallery navigation elements and lightbox functionality when js is enabled.
 *	
 *	DAS 24.11.2009 Removed functionality for cykling through the pictures when clicking the pictures
 *
 *--------------------------------------------------------------------------*/

ProductGallery = Behavior.create({
	initialize : function() {

		this.pictures = this.element.childElements();
		this.pictures.invoke("hide");
		this.index = 0;
		
		//Display the first picture.
		this.element.select("div.picture")[0].show();
		
		// Add lightbox rel class if there's a link to a fullsize image.
		this.element.select( "div.picture" ).each( function ( imgContainer ) {
			var fullSizeImgURL = imgContainer.down( "a" );
			if ( fullSizeImgURL.href ){
				var lightboxStr = (this.pictures.length > 1) ? "lightbox[gallery]" : "lightbox";
				fullSizeImgURL.setAttribute("rel", lightboxStr);
				//var zoomButton = new Element('a', { 'class': 'zoom', href: fullSizeImgURL, rel: 'lightbox' });
				//zoomButton.innerHTML = "+";
				//var zoom = imgContainer.insertBefore( zoomButton, imgContainer.down( "a" ) );
			}
		}.bind(this));

		if ( this.pictures.length > 1 ) {
			// Add navigation
			var controls_template = new Template( '<ul class="tabnav">#{links}</ul>' );
			var link_template = new Template( '<li class="#{className}"><a>#{index}</a></li>');
			var links = "";
			var className = "";
			for ( var i = 0; i < this.pictures.length; i++){
				className = i == 0 ? 'selected' : '';
				links += link_template.evaluate( { className : className, index : i + 1 });
			}
			this.element.insert( controls_template.evaluate( { links : links } ) );
			this.listItems = this.element.select("ul.tabnav li");
		} 
		if ( this.pictures.length == 1 ) {
			this.element.addClassName("single");
		}
	},
	onclick: function( e ) {
		
		var origin = Event.element( e );
		if ( origin.tagName.toLowerCase() == "a" ){
			this.navigate( parseInt( origin.innerHTML ) - 1 );
		} 
		/*
		else if ( origin.tagName.toLowerCase() == "img" ){
			if ( this.index < this.pictures.length - 1 ){
				this.navigate( this.index + 1  );
			} else if ( this.index == this.pictures.length - 1 ) {
				this.index = 0
				this.navigate( this.index );
		}*/
		
	},
	navigate: function( index ){
		this.pictures.each( function( picture ){
			picture.hide();
		});
		
		this.pictures[ index ].show();
		this.index = index;
		this.decorateControls();
	},

	decorateControls : function(){
		this.listItems.each( function ( li ){
			li.removeClassName( "selected" );
		});
		this.listItems[this.index].addClassName("selected");
	}
	
});	

Event.addBehavior({
	'div.product div.gallery' : ProductGallery
});