$(document).ready(function() {
// Declare variables
var direction = 'vertical'; // Additional variable which determines the slider direction - vertical or horizontal
var width = 400;
var height = 292; // Declare the height of the slider panel
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);
});
});
