$(function(){
	$('#slider').slider();	
	$('#journey_show_hide').journeyShowHide();
	$(".noclick").click(function() {
		return false;
	});
});

$.fn.journeyShowHide = function() {
	return this.each(function(){
	  var menu = $('#journey_menu');
	  var journeyContainers = $('#journey_content>div.journey_container');
	  var nav_right =  $("#nav_right");
    // show relevant story and hide others
    var showJourney = function(){
      var index = $(this).parents('ul:first').children().index($(this).parent());
      var journeyToShow = $(journeyContainers).eq(index).show();
      $(journeyContainers).not(journeyToShow).hide();
      $(this).parent().addClass('on').siblings('.on').removeClass('on');      
      if(index == 0){
        $(menu).addClass('pensions_on')
      }else{
        $(menu).removeClass('pensions_on')
      }
      return false;
    }   
    
	var navMove = function (next){
		index = $(next).parents("ul").children().index($(next).parent());
		var journeyToShow = $(journeyContainers).eq(index).show();		
		if (next.length)
		{
			$(journeyContainers).not(journeyToShow).hide();			
			$(".on").removeClass('on'); 
			$(next).parent().addClass('on');
			if(index == 0){
		        $(menu).addClass('pensions_on')
		      }else{
		        $(menu).removeClass('pensions_on')
		      }			
		}
	}

	$("#nav_right").click(function()
	{
		navMove($('.on',menu).next().children('a'));		
	});
	
	$("#nav_left").click(function()
	{
		navMove($('.on',menu).prev().children('a'));		
	});

    // setup menu 
    $('li>a',menu).click(showJourney).eq(0).parent().addClass('on');
    
    // set the pensions chevron to on by default
    $(menu).addClass('pensions_on');
    
    // hide story content except first one
	  $(journeyContainers).not($(journeyContainers).eq(0)).hide();
	  
	  // ie6 fix for z-index bug on hover
    $('li>a',menu).hover(
      function() {
        $(this).parent().addClass('hover');
      },
      function() {
        $(this).parent().removeClass('hover');
      }
    );
	  	  	  
	});
};


$.fn.slider = function() {
	return this.each(function(){
		var nav = $('#nav');
		var slides = $('#slides');
		var slideWidth = 992;
		var marker = $('<div id="marker"><div></div></div>');
		var linkColor = $('a:first',nav).css('color');
		
		var animateTo = function(){
			var animationSpeed = 500;

			// animate link colour
			$(this).animate({
				color: '#fff'
			},{ queue: false, duration: animationSpeed });
			
			// return other link colours to normal
			$(this).parent().siblings('.on').children('a').animate({
				color: linkColor
			},{
				queue: false,
				duration: animationSpeed,
				complete: function(){ $(this).css('color',''); }
			});
			
			// animate marker
			marker.animate({
				left: $(this).parent().position().left+'px',
				width: $(this).parent().innerWidth()
			},{ queue: false, duration: animationSpeed });
			
			$(this).parent().addClass('on').siblings().removeClass('on');
			
			// animate slides
			var index = $(this).parents('ul:first').children().index($(this).parent());
			slides.animate({
				scrollLeft: slideWidth*index
			},{ queue: false, duration: animationSpeed });
			
			return false;
		}
		
		// widen the box to let the list items float in a row
		$('#slides>ul').each(function(){
			$(this).width(slideWidth*$(this).children().length + 'px');
			if ($.browser.msie && $.browser.version <= 7) document.body.className += ''; /* :hack: force IE6 to redraw the screen */
		});
		
		// set up nav
		marker.css({
			left: $('li:first',nav).position().left+'px',
			width: $('li:first',nav).innerWidth()
		}).prependTo(nav);
		slides.scrollLeft(0);
		nav.append('<button class="prev"><img src="images/button_prev.png" alt="View previous" /></button><button class="next"><img src="images/button_next.png" alt="View next" /></button>');
		
		$('li>a',nav).click(animateTo).eq(0).css({color:'#fff'}).parent().addClass('on');
		$('.prev',nav).click(function(){
			var prev = $('.on',nav).prev().children('a');
			if (prev.length) animateTo.call(prev);
		});
		$('.next',nav).click(function(){
			var next = $('.on',nav).next().children('a');
			if (next.length) animateTo.call(next);
		});
		
	});
};


/*
 * jQuery Color Animations
 * Copyright 2007 John Resig
 * Released under the MIT and GPL licenses.
 */
	// Color Conversion functions from highlightFade
	// By Blair Mitchelmore
	// http://jquery.offput.ca/highlightFade/
(function(jQuery){jQuery.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(i,attr){jQuery.fx.step[attr]=function(fx){if(fx.state==0){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end)}fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")"}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3){return color}if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)){return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])]}if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)){return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55]}if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)){return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)]}if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)){return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)]}}function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=""&&color!="transparent"||jQuery.nodeName(elem,"body")){break}attr="backgroundColor"}while(elem=elem.parentNode);return getRGB(color)}})(jQuery);