// JavaScript Document
$(document).ready(function() {
  // Declare variables
  var direction = 'vertical';
  var width = 400;
  var height = 193;
  var slides = $('#list-images li');
  var numSlides = slides.length;
  
  // Set CSS of slide-wrap based on direction
  wrapCss = direction == 'vertical' ? {height: height * numSlides} : {width: width * numSlides} ;
  
  // Wrap the slides & set the wrap width
  slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
  $('#slide-wrap').css(wrapCss);
  
  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
	$('#list-links li').removeClass('hover');
	var i = $(this).index('#list-links li a');
	$(this).parent().addClass('hover');
	
	// Set animation based on direction
	params = direction == 'vertical' ? {'marginTop' : height*(-i)} : {'marginLeft' : width*(-i)} ;
	$('#slide-wrap').stop().animate(params);
  });
  
    // Additional demo code for Toggle link
  $('.link-switch').click(function(e){
	var rel = $(this).attr('rel');
	direction = rel;
	$('#slide-wrap').css({marginTop: 0, marginLeft: 0});
	$('#list-links li').removeClass('hover');
	$('#list-links li:eq(0)').addClass('hover');
	wrapCss = direction == 'vertical' ? {height: height * numSlides, width: width} : {width: width * numSlides, height: height} ;
	$('#slide-wrap').css(wrapCss);
	$('.link-switch').toggle();
	e.preventDefault();
  });
});