$(document).ready(function(){
var panel18_currentPosition = 0;
var panel18_slideWidth = 600;
var panel18_slides = $('.panel18_slide');
var panel18_numberOfSlides = panel18_slides.length;
// Remove scrollbar in JS
$('#panel18_slideshow').css('overflow', 'hidden');
$('#panel18_slideshow').css('width', '580px');
$('.ninesixty .panel .details').css('width', '330px');
$('.ninesixty .panel #panel18_slideshow').css('width', '580px');
// Wrap all .slides with #slideInner div
panel18_slides
.wrapAll('
')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : panel18_slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#panel18_slideInner').css('width', panel18_slideWidth * panel18_numberOfSlides);
// Insert left and right arrow controls in the DOM
$('.ninesixty #panel18 .link')
.append('PreviousNext
');
// Hide left arrow control on first load
manageControls(panel18_currentPosition);
// Create event listeners for .controls clicks
$('.panel18_control')
.bind('click', function(){
// Determine new position
panel18_currentPosition = ($(this).attr('id')=='panel18_next')
? panel18_currentPosition+1 : panel18_currentPosition-1;
// Hide / show controls
manageControls(panel18_currentPosition);
// Move slideInner using margin-left
$('#panel18_slideInner').animate({
'marginLeft' : panel18_slideWidth*(-panel18_currentPosition)
});
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#panel18_previous').hide() }
else{ $('#panel18_previous').show() }
// Hide right arrow if position is last slide
if(position==panel18_numberOfSlides-1){ $('#panel18_next').hide() }
else{ $('#panel18_next').show() }
}
});