slideWidth = 636;
// avoid conflicts
//$.noConflict();

// setup handlers for creature
jQuery(document).ready(function(){
	// preload rollover images
	jQuery.preLoadImages('mysite/img/navigation/identity-over.png', 'mysite/img/navigation/print-over.png', 'mysite/img/navigation/packaging-over.png', 'mysite/img/navigation/webdesign-over.png', 'mysite/img/navigation/motion-over.png');
	
	// slideshow rollovers
	$('.dotnav IMG').mouseover(rollover);
	$('.dotnav IMG').mouseout(rollover);
	
	// smooth scrolling for section links
	$.localScroll();
	// smooth scrolling for back to top links
	//$('.backtotop').localScroll();
	
	// hide item nav bits
	$('.meta DIV.share').hide();
	
	// hide full content
	$('.pcontentfull').hide();
	
	// hide aside content
	$('.asideContent').hide();
	
	// handlers for asides
	$('a.asideSlider').click(function(){
		asideContent = $(this).parent().find('.asideContent');
		if(asideContent.css('display') == 'block'){
			// switch back to top link (if any) z-index back to normal
			$('.backtotop').css('z-index', '90');
			// reset snakey bg to normal image
			$(this).find('img').attr('src', 'mysite/img/aside.png');
			asideContent.hide(500);
			// set var in attribute
			$(this).attr('title', 'off');
			return false;	
		}
		else{
			// lower z-index to 'hide' link
			$('.backtotop').css('z-index', '20');
			// set snakey bg to 'over' image
			$(this).find('img').attr('src', 'mysite/img/aside-over.gif');
			asideContent.show(500);
			// set var in attribute
			$(this).attr('title', 'on');
			return false;	
		}
	});
	
	// rollover for asides
	$('a.asideSlider img').mouseover(function(){
		$(this).attr('src', 'mysite/img/aside-over.gif');	
	});
	
	$('a.asideSlider img').mouseout(function(){
		if($(this).parent().attr('title') != 'on'){
			$(this).attr('src', 'mysite/img/aside.png');
		}
	});
	
	// aside 'close' button
	$('a.close').click(function(){
		// increase z-index to make link clickable again
		$('.backtotop').css('z-index', '90');
			
		$(this).parent().hide(500);
		$(this).parent().parent().find('.asideSlider img').attr('src', 'mysite/img/aside.png');
		$(this).parent().parent().find('.asideSlider').attr('title', 'off');
		return false;
	});
	
	// handler for 'watch video' links
	$('a.watchvideo').click(function() {
		// parent id as string (navigate up the dom tree)
		cID = $(this).parent().parent().parent().find('.slideshow').attr('id');
		// change current position
		currentPosition[cID] = 1;
		// get current position and make sure the navigation controls are correct
		manageControls(1, $(this).parent().parent().parent());
		// we animate using marginLeft, so we need to figure out the new left margin for the requested slide
		newmargin = newMargin(1);
		// Move slideInner using margin-left
		$(this).parent().parent().parent().find('#slideInner').animate({
			'marginLeft' : newmargin
		});
		// stop the link functioning as normal
		return false;
	});
	
	// handlers for full content show
	$('a.readmore').click(function(){
		// switch
		intro = $(this).parent().find('.pcontent');
		fullContent = $(this).parent().find('.pcontentfull');
		if(intro.css('display') == 'block'){
			intro.hide(500);
			fullContent.show(500);
			$(this).html('<img src="mysite/img/item-nav/read-more.gif" />Read less');
		}
		else{
			intro.show(500);
			fullContent.hide(500);
			$(this).html('<img src="mysite/img/item-nav/read-more.gif" />Read More');
		}
		
		return false;
	});
	
	// handlers to show content for share
	$('.meta a.share').click(function(){
		shareBlock = $(this).parent().find('DIV.share');
		
		if(shareBlock.css('display') == 'block'){
			shareBlock.hide(300);
			$(this).html('<img src="mysite/img/item-nav/share.gif" alt="" />Share');
		}
		else{
			shareBlock.show(300);
			$(this).html('<img src="mysite/img/item-nav/share.gif" alt="" />Close');
		}
		
		return false;
	});
	
	// flash video
	
	$.fn.media.mapFormat('mov','flash');
	
	
	
	$('.video').media({
	
	width: 636,
	height: 344,
	flvPlayer: 'mysite/flash/video-player.swf',
	autoplay: false
	/*
	flashvars: {
		// video
		videoPath:"{$Video.Link}",
		viewInfoButton 		:	"false",
		// view fullscreen button		( true / false )
		viewFullscreenButton 	:	"false",
		// view scale button			( true / false )
		viewScaleButton 		:	"false",
		// view volume controls			( true / false )
		viewVolumeControls 	:	"true",
		// view video time				( true / false )
		viewTime				:	"false",
		// view big middle button		( true / false )
		viewBigPlayButton 	:	"true",
		// view right click menu		( true / false )
		viewRightClickMenu 	:	"true",
		// mouse hide							( true / false )
		mouseHide				:	"true",
		// mouse hide after # (seconds)		NOTE : Must be a hole number !
		mouseHideTime			:	"3",
		// double click for toggle size view	( true / false )
		doubleClick			:	"true",
		// click the video for play/pause		( true / false )
		oneClick				:	"true",
		// play/pause on SPACE key 		( true / false )
		spaceKey				:	"true",
		// video loop				( true / false )
		videoLoop			:	"false",
		// video auto play			( true / false )
		videoAutoPlay		:	"false",			
		// video buffer time		( seconds )
		videoBufferTime	:	"0.1",
		// timeline interval	
		tlInterval		:	"100000",
		// sound volume at start 		NOTE :	1:Max	0:Min
		soundVolume		:	"0.8",
		// size the video starts at
		// can be set to 1, 2 and 3
		// 1 for narmol size view
		// 2 for aspect view 
		// 3 for full size view
		fullSizeView		:	"1",
		// spacing between the controls
		spacing 			:	"10",
		// control bar height		( height )
		controlHeight		:	"25",
		// vulume scrub lenght 		( lenght )
		volumeLengthW		: 	"50",
		// controls background		( colors / alphas )
		color1 			: 	"0x2e2e2e",
		color2 			: 	"0x000000",
		alpha1 			: 	"1",
		alpha2 			: 	"1",
		// controls border			( color / alpha )
		borderColor 		: 	"0x555555",
		borderAlpha		: 	"1",
		// time view ////////////////////////////////////
		// time view background		( colors / alphas )
		timeColor1		: 	"0x333333",
		timeColor2		: 	"0x111111",
		timeAlpha1		: 	"1",
		timeAlpha2		: 	"1",
		// time view text color		( color )
		timeTextColor1	: 	"0xffffff",
		timeTextColor2	: 	"0x888888",
		// scrubber /////////////////////////////////////////////////////
		// scrubber height			( height )
		scrubberHeight 	:	"3",
		// scrubber background 		( color / alpha )
		scrubberColor1	: 	"0x333333",
		scrubberAlpha1	: 	"1",
		// scrubber					( color / alpha )
		scrubberColor2	: 	"0x47d2ff",
		scrubberAlpha2	: 	"1",
		// scrubber glow filter		( color / alpha )
		filterColor		: 	"0x0066ff",
		filterAlpha		: 	"1",
		// control buttons	///////////////////////////////////////////////
		// control buttons color	( color )
		//buttonColor		: 	"0x000000",
		
		// info view /////////////////////////////////////////////////////
		// title color					( color )
		titleColor			:	"0x47d2ff",
		// description color			( color )
		descriptionColor		:	"0xD3D3D3",
		// info background				( color / alpha )
		infoBackgroundColor	:	"0x000000",
		infoBackgroundAlpha	:	"0.5"
	}
	*/
		
		} );
	// original = 882 x 659
	$('.billboardvideo').media({ width: 792, height: 351, autoplay: true } );
	
	/* slideshow */
	if($('DIV.slideshow').length > 0){
		
		counter = 1;
		
		// add id for each slideshow and counter ID's for each dotnav item
		$('DIV.slideshow').each(function(){
			
			$(this).attr('id', 'slideshow'+counter);
			counter ++;
			
			dotnavcounter = 1;
			$(this).parent().find('li a').each(function(){
				$(this).attr('id', dotnavcounter);
				dotnavcounter ++;
			});
		});
		
		/*
		behaviour for all
		*/
		// Remove scrollbar in JS
		$('.slidecontainer').css('overflow', 'hidden');
		
			// apply behaviour for each sideshow on page
			$('DIV.slideshow').each(function(){
				
				// register tracking property for this slideshow
				if(typeof currentPosition == 'undefined'){
					currentPosition = new Object;
				}
				// current s/show id as string
				cID = $(this).attr('id');
				currentPosition[cID] = 1;
				
				// remove left control
				manageControls(1, $(this));
				
				// Float left to display horizontally, readjust .slides width
				$(this).find('.slide').wrapAll('<div id="slideInner"></div>').css({
							'float' : 'left',
							'width' : slideWidth
						});
				
				// tweak video width to stop images dropping down
				if($(this).find('.creature-video')) {
					$(this).find('.creature-video').css({
							'width' : '604px'
						});	
				}
				
				
				var slides = $(this).find('.slide');
				numberOfSlides = slides.length;
				
				// only add nav and s/show if slides > 1
				if($(this).find('.slide').length > 1) {
					// set attribute on div we can query later
					$(slides).parent().attr('slides', numberOfSlides);
					
					// Set #slideInner width equal to total width of all slides
					$(this).find('#slideInner').css('width', slideWidth * numberOfSlides);
					
					// get slidinner for this context
					slideinner = $(this).find('#slideinner');
					
					// bind events for dot nav
					$(this).parent().find('.dotnav li a').bind('click', function(){
						// parent id as string (navigate up the dom tree)
						cID = $(this).parent().parent().parent().find('.slideshow').attr('id');
						// change current position
						currentPosition[cID] = parseInt(this.id);
						// get current position and make sure the navigation controls are correct
						manageControls(this.id, $(this).parent().parent().parent());
						// we animate using marginLeft, so we need to figure out the new left margin for the requested slide
						newmargin = newMargin(this.id);
						// Move slideInner using margin-left
						$(this).parent().parent().parent().find('#slideInner').animate({
							'marginLeft' : newmargin
						});
						// stop the link functioning as normal
						return false;
					});
				}
				else {
					// remove controls and dotnav for slideshow with one slide
					
				}
				
				
				
				$(this).find('.control').bind('click', function( ){
					
					// parent id as string to use as position reference
					cID = $(this).parent().parent().parent().find('.slideshow').attr('id');
					
					// check positon is registered, register if not
					if(currentPosition[cID] == NaN || currentPosition[cID] == undefined){
						currentPosition[cID] = 1;
					}
					
					cp = parseInt(currentPosition[cID]);
				
					// figure out which way we're going - forward or backwards
					nextslide = (this.id == 'left') ? cp -1 : cp + 1;
					
					// record current position
					currentPosition[cID] = parseInt(nextslide);
					// correct controls
					manageControls(nextslide, $(this).parent());
					// get new margin pos for #slideInner
					newmargin = newMargin(nextslide);
					
					// Move slideInner using margin-left
					$(this).parent().find('#slideInner').animate({
						'marginLeft' : newmargin
					});
					// stop the link functioning as normal
					return false;
				});
				
				
			}); 
	} // end slideshow presence check

});


/* new position for slide */
function newMargin(id){
	return slideWidth*(id-1)*-1
}


// manageControls: Hides and shows controls depending on currentPosition and current jquery object
function manageControls(position, context){
	
	// take position and highlight the numeric nav
	highlightSlideshowNav(context, position);
	
	// get # of slides for this slideshow
	slides = context.find('#slideInner').attr('slides');
	// Hide left arrow if position is first slide
	if(position==1 && slides > 1){
		context.find('#left').hide();
		context.find('#right').show();
		}
	// Hide right arrow if position is last slide
	else if(position == slides){
		context.find('#right').hide();
		context.find('#left').show();
		}
	// default - show all
	else{
		context.find('#left').show();
		context.find('#right').show();
		}
	}

/* changes image based on state */
function rollover(){
	dot = $(this).attr('src').lastIndexOf('.');
	// what state are we in? (off / on)
	if($(this).attr('src').indexOf('-over') == -1){
		// switch to over state
		$(this).attr('src', $(this).attr('src').substring(0, dot) + '-over' + $(this).attr('src').substring(dot));
	}
	else{
		// switch to normal state
		$(this).attr('src', $(this).attr('src').substring(0, dot - 5) + $(this).attr('src').substring(dot));
	}
}


function highlightSlideshowNav(context, slideNumber){
	// remove any highlighting
	$(context).parent().parent().find('.dotnav li').removeClass('current');
	// get nav container for context
	$(context).parent().parent().find('.counter'+slideNumber).addClass('current');
	// 
}

/*
  image preloader - preload rollover images like dreamweaver back in the day
	http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
*/
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)