/**************************************************************
*  Images
**************************************************************/

/*****  Tabs  *****/

//  Hide any non-feed tabs if they have no pictures
if ( $$('div.imageType_3').length == 0 ) {
	$('imageTabExterior').hide();
}

if ( $$('div.imageType_4').length == 0 ) {
	$('imageTabInterior').hide();
}

var featuredImages = $$('div.imageType_2');
if ( featuredImages.length > 9 ) {
	lengthFeatured = featuredImages.length-1;
	
	for(i=9;i<=lengthFeatured;i++){
		featuredImages[i].hide();
	}
}

$$('#usedCarImageTabs a').invoke( 'observe', 'click', function ( ev ) {

	Event.stop( ev );									//  Stop normal click
	tab 		= ev.element();							//  Reference tab clicked
	tabIndex 	= $( tab ).previousSiblings().length;	//  Index of tab

	$( tab ).addClassName( 'active' ).siblings().invoke( 'removeClassName', 'active' );		//  Add "active" class and remove from other tabs

	$('usedCarPhoto').hide();							//  Hide main image
	$$('#usedCarThumbs div.thumb').invoke( 'hide' );	//  Hide thumbs by default

	//  Which tab?
	switch ( tabIndex ) {

		case 0:

			$('usedCarPhoto').show();

			$('usedCarThumbs').setStyle({
				'float': 'right',
				'paddingLeft': '0',
				'width': '294px'
			});

		break;

		default:

			$('usedCarThumbs').setStyle({
				'float': 'none',
				'paddingLeft': '6px',
				'width': 'auto'
			});

	}

	$$('#usedCarThumbs div.imageType_' + ( tabIndex + 2 ) ).invoke( 'show' );	//  Show images for type

});


/*****  Thumbs' ViewBox  *****/

//  Setup
ViewBox.init({
	'container': $('container')
});

ViewBox.changeImage = function ( thumbImage ) {
	$('vbViewStockMainImage').update( '<img src="' + $(thumbImage).src.replace( '/thumbs/', '/large/' ) + '" />' );
	$$('div#vbViewStockThumbs ul#vbViewStockThumbList li a').invoke( 'removeClassName', 'active' );
	thumbImage.up(0).addClassName( 'active' );
}

//  Apply listener to each of the thumbnails
$$('#usedCarThumbs div.thumb img').invoke( 'observe', 'click', function ( ev ) {

	var clickedImage = ev.element();

	ViewBox.switchOn({

		onSwitchOn: function () {

			/*****  Load content  *****/

			new Ajax.Request( baseHref + 'ajax.php', {
				'asynchronous': false,
				'parameters': 'type=getViewStockViewBoxContent&id=' + $F('autoCarDetailId'),
				'onSuccess': function ( t ) {

					r = t.responseText.evalJSON();

					var tpl = new Template( '<li><a href="#" onclick="return false;" class="viewBoxThumb"><img src="' + baseHref + 'images/global_auto/thumbs/#{image_src}" id="vbThumb_#{id}" /></a></li>' );

					r.images.each( function ( img ) {
						$('vbViewStockThumbList').insert( tpl.evaluate( img ) );
					});


					/*****  Video  *****/

					if ( typeof r.video.youtube_video_name != 'undefined' ) {

						$('vbTabVideos').show();

						$('vbYoutubeName').update( r.video.youtube_video_name );
						$('vbYoutubeVideo').update( r.video.youtube_video_code );

					}

				},
				'onComplete': function () {

					//  Clicks for image thumbs
					$$('a.viewBoxThumb').invoke( 'observe', 'click', function ( ev ) {
						Event.stop( ev );
						this.changeImage( ev.element() );
					}.bind( ViewBox ));

					//  Change based on the ID read from the class name of the image clicked (e.g. thumb_123456)
					var thumbId = /thumb_(\d+)/.exec( clickedImage.className )[1];

					image = $( 'vbThumb_' + thumbId );

					ViewBox.changeImage( image );

				}
			});


			$$('div.viewBoxTabs ul li a').invoke( 'observe', 'click', function ( tab ) {
				$$('div.viewBoxTabs ul li a').invoke( 'removeClassName', 'active' );
				tab.element().addClassName( 'active' );
			});

			ev.element().addClassName( 'active' );


			/*********************************************************************
			*  Images
			*********************************************************************/

			$('vbTabImages').observe( 'click', function ( ev ) {

				Event.stop( ev );

				$('vbViewStockImageSection').show();

				if ( $('vbViewStockVideoSection') ) {
					$('vbViewStockVideoSection').hide();
				}

			});

			/*****  Controls  *****/

			this.thumbs = $$('div#vbViewStockThumbs ul#vbViewStockThumbList li a img');

			//  First
			$$('a.viewBoxImageFirst').invoke( 'observe', 'click', function () {
				this.changeImage( this.thumbs.first() );
				$('vbViewStockThumbs').scrollTop = 0;
			}.bind( ViewBox ));

			//  Previous
			$$('a.viewBoxImagePrevious').invoke( 'observe', 'click', function ( ev ) {

				Event.stop( ev );

				var link = this.thumbs.findAll( function ( el ) {
					return el.up(0).hasClassName( 'active' );
				})[0].up(0);

				if ( link.up(0).previousSiblings().length > 0 ) {
					this.changeImage( link.up(0).previous(0).down(1) );
				}

			}.bind( ViewBox ));

			//  Next
			$$('a.viewBoxImageNext').invoke( 'observe', 'click', function ( ev ) {

				Event.stop( ev );

				var link = this.thumbs.findAll( function ( el ) {
					return el.up(0).hasClassName( 'active' );
				})[0].up(0);

				if ( link.up(0).nextSiblings().length > 0 ) {
					this.changeImage( link.up(0).next(0).down(1) );
				}

			}.bind( ViewBox ));

			//  Last
			$$('a.viewBoxImageLast').invoke( 'observe', 'click', function () {
				image = $$('div#vbViewStockThumbs ul#vbViewStockThumbList li a img').last();
				this.changeImage( image );
				$('vbViewStockThumbs').scrollTop = image.positionedOffset()[1];
			}.bind( ViewBox ));


			/*********************************************************************
			*  Video
			*********************************************************************/

			if ( $('vbViewStockVideoSection') ) {

				$('vbTabVideos').observe( 'click', function ( ev ) {

					Event.stop( ev );

					$('vbViewStockImageSection').hide();
					$('vbViewStockVideoSection').show();

				});

			}


		}.bind( ViewBox )
	});

});


/**************************************************************
*  Jumps
**************************************************************/

$$('#usedCarJumps a.hiddenForm').invoke( 'observe', 'click', function ( ev ) {
	Event.stop( ev );								//  Stop normal click
	$('hiddenForm').action = ev.element().href;		//  Set action of form to link
	$('hiddenForm').submit();						//  Submit form
});

//  Save to favourites
$('usedJumpSave').observe( 'click', function ( ev ) {
	Event.stop( ev );
	favouritesList.save( $F('autoCarDetailId') );
	itEvent( 'saveToFavourites', null );
});

//  Print
$('usedJumpPrint').observe( 'click', function ( ev ) {
	Event.stop( ev );
	window.print();
	itEvent( 'printDetails', null );
});


/**************************************************************
*  Car Summary
**************************************************************/

//  "Adjust your finance" button
//$('adjustYourFinance').observe( 'click', function( ev ) {
//
//	Event.stop( ev );
//
//	$$('ul.domtabs li.domTab').invoke( 'removeClassName', 'active' );		//  Remove the active class
//	$$('div.tabset_content').invoke('hide'); 								//  Hide content
//
//	$$('ul.domtabs li.domTab')[1].addClassName( 'active' );					//  Set active class
//	$$('div.tabset_content')[1].show();	 									//  Show content
//
//});

function adjustFinance(){

	$$('ul.domtabs li.domTab').invoke( 'removeClassName', 'active' );		//  Remove the active class
	$$('div.tabset_content').invoke('hide'); 								//  Hide content

	$$('ul.domtabs li.domTab')[4].addClassName( 'active' );					//  Set active class
	$$('div.tabset_content')[4].style.display = 'block';	 									//  Show content

}