// JavaScript Document
var $bnq = jQuery.noConflict();

//Globals
var arrowPressed = false;
var doAgain = false;
var bnqAnimationSpeed = 300;
var imageCache = [];
var showArrowsAfterNumberOfListItems = 5;

var imageMenuDOMLocationString = '#orv-build-and-quote-content-select-model-menu';
var naviagtionDOMLocationString = '#orv-left-nav-navigation-build';
var contentDOMLocationString = '#orv-build-and-quote-content-area';

var bigImageDOMLocationString = '#orv-build-and-quote-big-image';
var rightContentDOMLocationString = '#orv-build-and-quote-content-vehicle-view';
var buildThisModelDOMLocationString = '#orv-build-and-quote-build-this-model';
var carouselDOMLocationString = '#orv-build-and-quote-carousel-container';
var numberOfVehiclesDOMLocationString = '#bnq-number-of-vehicles';

var leftArrowLocationString = '#orv-build-and-quote-content-left-arrow';
var rightArrowLocationString = '#orv-build-and-quote-content-right-arrow';

var rotateCarousel = false;

$bnq(document).ready( bnq_READY );
$bnq(window).load( bnq_LOAD );

//bnq_READY
function bnq_READY(){
	
	$bnq( imageMenuDOMLocationString + ' > ul > li').click( function(){	
		bnq_showSelectedModels( $bnq(this) );
	});

	$bnq( naviagtionDOMLocationString + ' > ul > li').click( function(){	
		bnq_showSelectedModels( $bnq( imageMenuDOMLocationString + ' > ul > li:eq('+ $bnq(this).index()	+ ')' ) );
	});
	
	$bnq( leftArrowLocationString ).click( function(){	
		if( rotateCarousel )
			bnq_selectItem( $bnq( carouselDOMLocationString +' > ul:visible > li:eq(1)') );
	});
	
	$bnq( rightArrowLocationString ).click( function(){	
		if( rotateCarousel )
		bnq_selectItem( $bnq( carouselDOMLocationString + ' > ul:visible > li:eq(3)') );
	});
	
	$bnq( carouselDOMLocationString + ' > ul > li').click( function(){
		bnq_selectItem( $bnq(this) );
	});
}

//bnq_LOAD
function bnq_LOAD(){
	var cacheImage;


	//Initially load next 2nd click images		
	$bnq( imageMenuDOMLocationString + ' > ul > li' ).each(function(index) {
		cacheImage = document.createElement('img');
		cacheImage.src = $bnq( ' > img', this ).attr('title');
      	imageCache.push(cacheImage);	
	});

	$bnq( carouselDOMLocationString + ' > ul' ).each(function(index) {
		if ($bnq( '> li:eq(2) > .model-image', this ).text())
		{
			cacheImage = document.createElement('img');
			cacheImage.src = $bnq( '> li:eq(2) > .model-image', this ).text();
	      	imageCache.push(cacheImage);
	
			for( var i = 0; i < ( $bnq( '> li', this ).size() >= showArrowsAfterNumberOfListItems ? showArrowsAfterNumberOfListItems : $bnq( '> li', this ).size() ); i++ )
				bnq_loadImage( $bnq( '> li:eq(' + i + ') > img', this ) );
		}
	});	
}

//bnq_buildCarousel( imageIndex )
//Shows the Carousel that's associated with the selected model
function bnq_buildCarousel( imageIndex ){
	var carouselListItemString = carouselDOMLocationString + ' > ul:eq(' + imageIndex + ') > li';
	$bnq( leftArrowLocationString ).show();
	$bnq( rightArrowLocationString ).show();
	
	if( $bnq( carouselListItemString ).size() <= showArrowsAfterNumberOfListItems ){
		$bnq( leftArrowLocationString ).addClass( 'disabled' );
		$bnq( rightArrowLocationString ).addClass( 'disabled' );
		$bnq( carouselListItemString ).show();
		
		//aligning the carousel text
		var ulWidth = $bnq(carouselListItemString).parent().width();
		$bnq(carouselListItemString).parent().width( ulWidth);
		bnq_loadImage( $bnq(carouselListItemString + ' > img') );
		
	}else{
		$bnq( leftArrowLocationString ).removeClass( 'disabled' );
		$bnq( rightArrowLocationString ).removeClass( 'disabled' );

		$bnq(carouselListItemString).parent().width( '325px' );

		$bnq(carouselListItemString + ':lt(5)').show();
		bnq_loadImage( $bnq(carouselListItemString + ':eq(5) > img') );
		bnq_loadImage( $bnq(carouselListItemString + ':last > img') );		
	}
}

//bnq_loadImage( imageThis )
//Swaps the target tag with src tag if the target tag is populated
function bnq_loadImage( imageThis )
{
	var tempImageTitle = imageThis.attr( 'title' );
	var loadedImage = false;
	if( tempImageTitle !== undefined && tempImageTitle.length > 0 )
		{
			imageThis.attr( 'src', imageThis.attr( 'title' ) ); 
			imageThis.attr( 'title', '' ); 
			loadedImage = true;
		}
	
	return loadedImage;
}

//bnq_makeBlue( liSelect )
//Makes the background of the selected image blue
function bnq_makeBlue( liSelect ){
	$bnq( '> li', liSelect.parent() ).removeClass( 'selectThumb' );
	liSelect.addClass( 'selectThumb' );	
	$bnq( bigImageDOMLocationString + ' > a > img' ).attr( 'src', $bnq( '.model-image', liSelect ).text() );
	$bnq( bigImageDOMLocationString + ' > a > img' ).attr( 'alt', $bnq( '.model-image-alt', liSelect ).text() );
	$bnq( bigImageDOMLocationString + ' > a' ).attr( 'href', $bnq( '.model-build-url', liSelect ).text() );	
	$bnq( rightContentDOMLocationString + ' > h3' ).html( $bnq( '.model-name', liSelect ).html() );
	$bnq( buildThisModelDOMLocationString + ' > a' ).attr( 'href', $bnq( '.model-build-url', liSelect ).text() );	
}

//changeCarouselText( liSelect )
//Gives a text navigation based on the selected item and the first item
function changeCarouselText( liSelect ){
	var firstItem = $bnq( '> li.firstItem', liSelect.parent() ).index();
	if( firstItem < 0 )
		firstItem = 0;
	var total = $bnq( '> li', liSelect.parent() ).size();
	var selectItem = liSelect.index();
		
	if( total > showArrowsAfterNumberOfListItems )
		var offset = -2; // Middle item is always selected if li more than max
	else
		var offset = 0;
	
	$bnq( numberOfVehiclesDOMLocationString + ' > span' ).first().text( ( modulo( (selectItem - firstItem + offset), total )  + 1 ) );
	$bnq( numberOfVehiclesDOMLocationString + ' > span' ).last().text( total );	
}

//bnq_selectItem( liSelect )
//loads the content area with the selected thumbs info and circles the carousel such that the middle thumb is always selected
function bnq_selectItem( liSelect ){
	
	if( $bnq( '> li', liSelect.parent() ).size() <= showArrowsAfterNumberOfListItems )
		bnq_makeBlue( liSelect );
	
	else if( arrowPressed == false ){
		arrowPressed = true;
		bnq_makeBlue( liSelect );
	
		if( liSelect.index() == 0 ){
			doAgain = true;
			bnq_shiftLeft();
		}else if( liSelect.index() == 1 ){
			bnq_shiftLeft();
		}else if( liSelect.index() == 3 ){
			bnq_shiftRight();
		}else if( liSelect.index() == 4 ){
			doAgain = true;
			bnq_shiftRight();
		}else
			arrowPressed = false;
	}
	changeCarouselText( liSelect );
}

//bnq_shiftLeft(e)
//Takes the last li and move it to the front.  Then animate the first thumb and last thumb.  Preload next click information after the animation is done.
function bnq_shiftLeft(e){
	var startLastVisibleThis = $bnq( carouselDOMLocationString + ' > ul:visible > li:visible').last();
	var startLastHiddenThis = $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').last();
	var clone = startLastHiddenThis.clone(true);//.css('width', '0px');
	var startLastVisibleThisWidth = startLastVisibleThis.width();

	startLastHiddenThis.remove();
	clone.prependTo( $bnq( carouselDOMLocationString + ' > ul:visible' ) ).show();
	
	//aminates concurrently
	clone.css( 'margin-left', '-63px');
	clone.animate({marginLeft:'5px'}, bnqAnimationSpeed, function(){ $bnq( '> img', clone).css('float', 'left') });
	startLastVisibleThis.animate({width:'0px'}, bnqAnimationSpeed, function(){ 
		startLastVisibleThis.hide();
		startLastVisibleThis.css('width', startLastVisibleThisWidth +'px' );
		startLastVisibleThis.css('margin-right', '1px' );
		
		var imageLoaded = bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').last() ) );
		if( imageLoaded ){
			var cacheImage = document.createElement('img');
			cacheImage.src = $bnq( ' > .model-image', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').last() ).text();
			imageCache.push(cacheImage);
		}
		
		arrowPressed = false;
		
		if( doAgain ){
			arrowPressed = true;
			doAgain = false;
			bnq_shiftLeft();
		}
	});		
}

//bnq_shiftRight(e)
//Move the first li to the end.  Then animate the first thumb and last thumb.  Preload next click information after the animation is done.
function bnq_shiftRight(e){
	var startFirstVisibleThis = $bnq( carouselDOMLocationString + ' > ul:visible > li:visible').first();
	var startFirstHiddenThis = $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').first();
	var clone = startFirstVisibleThis.clone(true).hide();
	var startFirstHiddenThisWidth = startFirstHiddenThis.width();
	
	startFirstHiddenThis.css('width', '0px').show();
	
	//aminates concurrently
	startFirstHiddenThis.animate({width:startFirstHiddenThisWidth+'px'}, bnqAnimationSpeed );
	startFirstVisibleThis.animate({marginLeft:'-63px'}, bnqAnimationSpeed, function(){ 
		$bnq(this).remove() 
		startFirstHiddenThis.show();
		clone.appendTo( $bnq( carouselDOMLocationString + ' > ul:visible' ) );

		var imageLoaded = bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').first() ) );
		if( imageLoaded ){
			var cacheImage = document.createElement('img');
			cacheImage.src = $bnq( ' > .model-image', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').first() ).text();
			imageCache.push(cacheImage);
		}
		
		arrowPressed = false;
		if( doAgain ){
			arrowPressed = true;
			doAgain = false;
			bnq_shiftRight();
		}		
	});
}

//bnq_showSelectedModels( clickedThis )
//Change the selected image then build the carousel and preload next click images
function bnq_showSelectedModels( clickedThis ){

	if( $bnq( rightContentDOMLocationString ).is(":hidden") )
		$bnq( rightContentDOMLocationString ).show();

	if( $bnq( carouselDOMLocationString ).is(":hidden") )
		$bnq( carouselDOMLocationString ).show();
		
	if( !clickedThis.hasClass( 'selected' ) )
	{
//Change the selected image back to unselected
		bnq_swapImage( $bnq( imageMenuDOMLocationString + ' > ul > li.selected > img') );

//Add selected class.  This will be the universal selected 
		$bnq( imageMenuDOMLocationString + ' > ul > li').removeClass( 'selected' );
		clickedThis.addClass( 'selected' );

//Get the new selected model's index			
		var imageIndex = clickedThis.index();

//Make selection in menu blue
		$bnq( naviagtionDOMLocationString + ' > ul > li').removeClass( 'selected' );
		$bnq( naviagtionDOMLocationString + ' > ul > li:eq('+ imageIndex	+ ')' ).addClass( 'selected' );

//Change the selected image to blue		
		bnq_swapImage( $bnq( '> img', clickedThis ) );
		
//Build the Carousel 
		bnq_buildCarousel( imageIndex );

//Select the initial image		
		if( $bnq( carouselDOMLocationString + ' > ul:eq(' + imageIndex + ') > li' ).size() > showArrowsAfterNumberOfListItems )
			bnq_selectItem( $bnq( carouselDOMLocationString + ' > ul:eq(' + imageIndex + ') > li:eq(2)' ) );
		else{
			var selectThumbIndex = $bnq( carouselDOMLocationString + ' > ul:eq(' + imageIndex + ') > li.selectThumb' ).index();
			if( selectThumbIndex < 0 )
				selectThumbIndex = 0;
				
			bnq_selectItem( $bnq( carouselDOMLocationString + ' > ul:eq(' + imageIndex + ') > li:eq('+ selectThumbIndex +')' ) );
		}
		
//Hide all Carousels and show the Carousel		
		$bnq( carouselDOMLocationString + ' > ul').hide();
		$bnq( carouselDOMLocationString + ' > ul:eq(' + imageIndex + ')' ).show();
		if( !$bnq( carouselDOMLocationString + ' > ul:visible > li').hasClass( 'firstItem' ) )
			$bnq( carouselDOMLocationString + ' > ul:visible > li' ).eq(0).addClass( 'firstItem' );

//Show direction heading
		$bnq( contentDOMLocationString + ' > h4' ).show();

//Turn Carousel rotation on/off		
		if( $bnq( carouselDOMLocationString + ' > ul:visible > li').size() > showArrowsAfterNumberOfListItems ){
			rotateCarousel = true;
		}else{
			rotateCarousel = false;
		}
		
//Preload next clicks
		bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').first() ) );
		bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').first().next() ) );
				
		bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').last() ) );
		bnq_loadImage( $bnq( ' > img', $bnq( carouselDOMLocationString + ' > ul:visible > li:hidden').last().prev() ) );

		var cacheImage;
		$bnq( carouselDOMLocationString + ' > ul > li:lt(5)' ).each(function(index) {
			cacheImage = document.createElement('img');
			cacheImage.src = $bnq( ' > .model-image', this ).text();
			imageCache.push(cacheImage);
		});
	}
}

//bnq_swapImage( imageThis )
//Swaps the src with the title
function bnq_swapImage( imageThis )
{
	var tempImageSrc = imageThis.attr( 'src' );
	var tempImageTitle = imageThis.attr( 'title' );
	imageThis.attr( 'src', tempImageTitle ); 
	imageThis.attr( 'title', tempImageSrc ); 	
}

//modulo( number, mod )
//Hack around the JS modulo error
function modulo( number, mod ){
	return ( ( number % mod ) + mod ) % mod;
}