/* variables set in the calling php,
// sizes set from Wp thumb parameters
// nThumbsToShow is set from how many we can fit
// into the carousel width
//
var thumbHeight = <?=$thumbHeight?>;
var thumbWidth = <?=$thumbWidth?>;
*/

var NGDTdone = false;
jQuery(document).ready(function( $ ){

  	var currentPosition = 0;
  	var thumbs = $('.ngdt_thumb');
  	var TotalThumbs = thumbs.length;
  	 
  	
  	// the height of the Carousel's parent.
 	// We use this to set the size of the main image panel.
 	// parent can be WP's content but we can control the 
 	// size of the gallery image in CSS using our own ngdt_Gallery
 	//
 	var parentWidth = $('#ngdt_Carousel').parent().width();
 	var parentHeight = $('#ngdt_Carousel').parent().height();

  	// work out how many
  	// thumbs we can show on the page.
  	//
  	//var ThumbPadding = $('.ngdt_thumb').css('padding-left').replace( "px", "");
  	//var ThumbMargin = $('.ngdt_thumb').css('margin-left').replace( "px", "");
  	//var ThumbBorder = $('.ngdt_thumb').css('borderLeftWidth').replace( "px", "");
  	
  	
  	
  	FullThumbWidth = thumbWidth + SurroundsWidth( $('.ngdt_thumb') ) //2*ThumbPadding + 2*ThumbMargin + 2*ThumbBorder;
  	FullThumbHeight = thumbHeight + SurroundsHeight( $('.ngdt_thumb') );//2*ThumbPadding + 2*ThumbMargin + 2*ThumbBorder;
  	  	
  	//var nThumbsToShow = 4;// Math.floor(parentWidth/FullThumbWidth);
  	
	var CarouselWidth = ( FullThumbWidth ) * nThumbsToShow;
		 	 	
 	// set the main image panel to fit into it's parent.
 	// width is a guess, based on an image ratio of 1:3
 	// and is a best fit for landscape but it's the height
 	// we really want to fix so the carousel position
 	// doesn't jump around when we change images in the panel.
 	// we'll look for and re-adjust any images that don't conform
 	// to this ratio later
 	//
 	var PanelWidth = parentWidth - SurroundsWidth( $('#ngdt_Panel') );
 	var PanelHeight = parentHeight - SurroundsHeight( $('#ngdt_Panel') );
 	
 	//$( '#ngdt_Panel').css('width', PanelWidth );    	$( '#ngdt_Panel').css('height', PanelWidth  / 1.5 );
 	


  	// set Carousel height 
  	//
	$('#ngdt_CarouselContainer').css( 'height', FullThumbHeight );
	
	// and the thumb size
	$('.ngdt_thumb').css( 'height', thumbHeight );
	//$('.ngdt_thumb').css( 'height', thumbHeight );
	
	// Set Carousel width
	// ToDo: if there's a border, we need to allow for one on each slide.
	//
	$('#ngdt_CarouselContainer').css( 'width', CarouselWidth );
	
	// control bar width, height and position of left control
	//
	// We have to get this from the css, unless we can use jquery to get image sizes??
	//
	var ControlIconWidth = $('#ngdt_leftControl').width();
 	var ControlIconHeight = $('#ngdt_leftControl').height();

 	$('#ngdt_controlContainer').css( 'width', CarouselWidth); 	 									
 	$('#ngdt_controlContainer').css( 'height', ControlIconHeight );
 	
 	
 	$('#ngdt_rightControl').css( 'left', CarouselWidth - ControlIconWidth - 1 ); // -1 allows for borderwidth of container
 															// Todo: calculate this!
 																
	// Remove scrollbar
	//
 	$('#ngdt_CarouselContainer').css('overflow', 'hidden');
	
 	
  	// Wrap all .ngdt_thumbs with #slideInner div
  	//
 	 thumbs.wrapAll('<div id="slideInner"></div>')
  	// Float left to display horizontally, readjust .ngdt_thumbs width
  	.css({
		'float' : 'left',
		'width' : thumbWidth
		});

	// Set #slideInner width equal to total width of all thumbs
	//
	$('#slideInner').css('width', FullThumbWidth * TotalThumbs);
	
	
	// set startup image for the Panel and it's size
	
	var FirstThumb = $('.ngdt_thumb:first');
	SwapImage( FirstThumb );
	
	// set up the thumbnail onclick callbacks
	//		
	$('.ngdt_thumb').bind( 'click', function() {
			
		SwapImage(  $(this) );

	});
	function SwapImage( t ) {
	
		
		// get the dimensions of the main display panel
		//
		panelWidth = $('#ngdt_Panel').width();
 		panelHeight = $('#ngdt_Panel').height();

		// the full size image dimensions that we saved off when we built the page
		//
		var args = getMyArgs( t );
		
		var height = Math.round( args['height'] );
		var width = Math.round( args['width'] );
		
		// compensate for borders,margins and paddings
		//		
		panelWidth -= SurroundsWidth(  $( '#ngdt_Panel' ).children().filter('img') );
		panelHeight -= SurroundsHeight(  $( '#ngdt_Panel' ).children().filter('img') );	
		
		// the full size image URL, saved off when we built the page
		//
		var src = args['src'];		
		
		
		// Resize our image to fit nicely in the panel
		//
		var ratio = width/height;

		if ( height > panelHeight ) {
			height = panelHeight;
			width = height * ratio;
		
		}
		if ( width > panelWidth ) {
			width = panelWidth;
			height = width / ratio;
		
		}
		
		// and update the img's size and src
		//
		$( '#ngdt_Panel' ).children().filter('img').attr( 'src', src );
		$( '#ngdt_Panel' ).children().filter('img').width( width );
		$( '#ngdt_Panel' ).children().filter('img').height( height );
		
		//$('#ngdt_Info').text( 'foo' );
		
		$('#ngdt_Info').text( t.children().filter('img').attr( 'description' ).toString() );
		$('#ngdt_Header').text( t.children().filter('img').attr( 'imagetitle' ).toString());

	
	
	}
	function getMyArgs( t ) {
	
		var s = t.children().filter('img').attr( 'imageinfo' ).toString();
		
		var aa = s.split( /;/ );

		var ret =  new Array();
		
		for ( var i=0; i<aa.length-1; i++ ) {		// length -1 ????
		
			var parm = aa[i];
			var a = parm.split( /=/ );

			ret[a[0]] = a[1];
			//Deb( a[0] + ", " + a[1] );
			
		}
				
		return ret;

	}

	// Hide left arrow control on first load
	//
	manageControls(currentPosition);

	// Create event listeners for .controls clicks
	$('.control')
		.bind('click', function(){
		// Determine new position
		currentPosition = ($(this).attr('id')=='ngdt_rightControl') ? currentPosition+1 : currentPosition-1;

		// Hide / show controls
		manageControls(currentPosition);
      
		// Move slideInner using margin-left
		// NOTE!! thumbWidth + 2, to cater 
		// for the borders on the thumbs
		// ToDo: calculate border width.
		
		$('#slideInner').animate({
			'marginLeft' : ( FullThumbWidth )*(-currentPosition )*nThumbsToShow,
			'speed' : 'slow'
		});
      
	});

	// manageControls: Hides and shows controls depending on currentPosition
	//
	function manageControls(position){
		
		var pPos = (position+1) * (nThumbsToShow); 
		
		//Deb( pPos + ',' + TotalThumbs );
				
		// Hide left arrow if position is first slide
		//
		if(position==0){ 
			$('#ngdt_leftControl').hide() }
		else{ 
			$('#ngdt_leftControl').show() 
		}
		// Hide right arrow if position is last slide
		//
		if( pPos > (TotalThumbs)){ 
			$('#ngdt_rightControl').hide()  
		} else{ 
			$('#ngdt_rightControl').show() 
		}
		
    }
    // return the sum of width of borders, padding, margins from an element
    function SurroundsWidth( t ) {
    	
    	var w = 0;
    	w += parseInt( t.css( 'padding-left' ) );
		w += parseInt( t.css( 'padding-right' ) );
		w += parseInt( t.css( 'margin-left' ) );
		w += parseInt( t.css( 'margin-right' ) );
		w += parseInt( t.css( 'borderLeftWidth' ) );
		w += parseInt( t.css( 'borderRightWidth' ) );
		
		return w;
    
    }
    function SurroundsHeight( t ) {
    	
    	var h = 0;
    	h += parseInt( t.css( 'padding-top' ) );
		h += parseInt( t.css( 'padding-bottom' ) );
		h += parseInt( t.css( 'margin-top' ) );
		h += parseInt( t.css( 'margin-bottom' ) );
		h += parseInt( t.css( 'borderTopWidth' ) );
		h += parseInt( t.css( 'borderBottomWidth' ) );
		
		return h;
    
    }

    function Deb( s ) {
      $('#debug').text( 'Debug: ' + s ); 
    }
    NGDTdone = true;
    
});