$(window).resize(function () {
	myresize();
});


myresize = function() {
		var width;
		if ($('#wrapper').get(0))
		{
			width=$('#wrapper').get(0).clientWidth;
		}
		else
		{
			return;
		}
		var $test;
		$test = $('#slider');
		$test.css({
			'width' : (width-80) + 'px'
		});
		$test = $('.scroll');
		$test.css({
			'width' : (width-80) + 'px'
		});
		$test = $('.scrollContainer div.panel');
		$test.css({
			'width' : (width-80-40) + 'px'
		});
    var horizontal = true;
    var $container = $('#slider .scrollContainer');
    var $panels = $('#slider .scrollContainer > div');
    if (horizontal) {
       // calculate a new width for the container (so it holds all panels)
      $container.css('width', $panels[0].offsetWidth * $panels.length);
    }
		el=$('#slider .scroll').get(0);
		var fromtop=el.clientHeight/2-13+el.offsetTop;
		$test = $('.scrollButtons');
		$test.css({
			'top' : fromtop + 'px'
		});

		el=$('#slidernavigation').find('a.selected');
		if (el)
		{
			el.click();
	  }
}
	

// when the DOM is ready...
$(document).ready(function () {
	sliderInit();
});
	
sliderInit = function() {

  var $panels = $('#slider .scrollContainer > div');

  // if false, we'll float all the panels left and fix the width 
  // of the container
  var horizontal = true;
  var $container = $('#slider .scrollContainer');

  // float the panels left if we're going horizontal
  if (horizontal) {
      $panels.css({
          'float' : 'left',
          'position' : 'relative' // IE fix to ensure overflow is hidden
      });
  }

  // collect the scroll object, at the same time apply the hidden overflow
  // to remove the default scrollbars that will appear
  var $scroll = $('#slider .scroll').css('overflow', 'hidden');

  // apply our left + right buttons
//    $scroll
//        .before('<img class="scrollButtons left" src="/test/img/arrow-left.gif" />')
//        .after('<img class="scrollButtons right" src="/test/img/arrow-right.gif" />');

  myresize();

	setInterval( sliderCheckHash, 100 );

  function sliderCheckHash() {
  	var i;
  	var j;
  	j=window.location.hash.substr(1);
		if (lasthash!=j)
		{
  		if (i==undefined)
  		{
  			i=$('#slidernavigation a.selected').attr('href');
  		}
  		if (i.indexOf('#')!=1)
  		{
  			i=i.substr(i.indexOf('#')+1);
  		}
  		else
			{
				return;
			}
			if (i!=j)
			{
      	//$('#debug').append("update required for " + j + "<br/>");
      	trigger({ id : j });
				var el=$('#slidernavigation').find('a.selected');
				if (el)
				{
					el.click();
			  } 
     }
  	}
  }
  
  
  // handle nav selection
  function selectNav() {
      
      $(this)
          .parents('div:eq(2)')
              .find('a')
                  .removeClass('selected')
              .end()
          .end()
          .addClass('selected');

  		if ($(this).attr('scrollleft')=='1')
  		{
  			$('#sliderleft').removeClass('hide');
  		}
  		else
			{
  			$('#sliderleft').addClass('hide');
			}
  		if ($(this).attr('scrollright')=='1')
  		{
  			$('#sliderright').removeClass('hide');
  		}
  		else
			{
  			$('#sliderright').addClass('hide');
			}
  }

  $('#slidernavigation').find('a').click(selectNav);

  $('#slidernavigation').find('input').mousedown(addRed);
  $('#slidernavigation').find('input').mouseup(removeRed);
  $('#slidernavigation').find('input').mouseleave(removeRed);

  $('#slidernavigation').find('img').mousedown(addRed);
  $('#slidernavigation').find('img').mouseup(removeRed);
  $('#slidernavigation').find('img').mouseleave(removeRed);

  function addRed(data) {
  	$(this).addClass('mouseDown');
  }
  function removeRed(data) {
  	$(this).removeClass('mouseDown');
  }
  
  var lasthash=window.location.hash.substr(1);
  
  // go find the navigation link that has this target and select the nav
  function trigger(data) {
  		var i = data.id;
  		var x;
  		var y;
  		var el;
  		if (i==undefined)
  		{
  			i=$('#slidernavigation a.selected').attr('href');
  		}
  		if (i==undefined)
  		{
  			i=$('#slidernavigation a:first').attr('href');
  		}
  		if (i.indexOf('#')!=1)
  		{
  			i=i.substr(i.indexOf('#')+1);
  		}
  		else
			{
				alert("only works with hashes");
			}
  		if (i.substr(i.length-7)=='_button')
  		{
  			i=i.substr(0,i.length-7);
  			alert("should not happen");
  		}
			if (window.location.hash.substr(1)!=i)
			{
				el = $('#slider').find('div[id="' + i + '"]');
				el.attr('id','_'+i);
				window.location.hash=i;
				el.attr('id',i);
			}	
			el = $('#slidernavigation').find('a[href$="' + i + '"]').get(0);
      selectNav.call(el);
      
      //$('#debug').append("called " + lasthash  + " x " + window.location.hash + "<br/>");
      if (lasthash!=window.location.hash.substr(1))
      {
      	var tool;
      	var expression;
     		expression = /^\/([a-zA-Z0-9]{1,})/i;
				expression.exec(window.location.pathname);
				tool=RegExp.$1;
				if (i)
				{
					action(tool,'show',null,null,i);
				}
				else
				{
					action(tool,'show',null,null,window.location.hash.substr(1));
				}
      }
      lasthash=window.location.hash.substr(1);
  }

  if (window.location.hash) {
      trigger({ id : window.location.hash.substr(1) });
				window.scrollTo(0,0);
  } else {
      $('#slidernavigation a:first').click();
  }

  
  //scrollToElement($('body'));
  
  // offset is used to move to *exactly* the right place, since I'm using
  // padding on my example, I need to subtract the amount of padding to
  // the offset.  Try removing this to get a good idea of the effect
  var offset = parseInt((horizontal ? 
      $container.css('paddingTop') : 
      $container.css('paddingLeft')) 
      || 0) * -1;


  var scrollOptions = {
      target: $scroll, // the element that has the overflow

      // can be a selector which will be relative to the target
      items: $panels,

      navigation: '#slidernavigation a',

      // selectors are NOT relative to document, i.e. make sure they're unique
      prev: '#sliderleft', 
      next: '#sliderright',
      hash: 1,

      // allow the scroll effect to run both directions
      axis: 'xy',

			lazy: 1,
			
      onAfter: trigger, // our final callback

      offset: offset,

      // duration of the sliding effect
      duration: 500,

      // easing - can be used with the easing plugin: 
      // http://gsgd.co.uk/sandbox/jquery/easing/
      easing: 'swing'
  };

  // apply serialScroll to the slider - we chose this plugin because it 
  // supports// the indexed next and previous scroll along with hooking 
  // in to our navigation.
  $('#slider').serialScroll(scrollOptions);

  // now apply localScroll to hook any other arbitrary links to trigger 
  // the effect
  $.localScroll(scrollOptions);

  // finally, if the URL has a hash, move the slider in to position, 
  // setting the duration to 1 because I don't want it to scroll in the
  // very first page load.  We don't always need this, but it ensures
  // the positioning is absolutely spot on when the pages loads.
  scrollOptions.duration = 1;
  $.localScroll.hash(scrollOptions);
}