//setup our slideshow preferences. For a complete list of references visit http://www.malsup.com/jquery/cycle/		
$(document).ready(function(){
//function onBefore(curr,next,opts) {
//    var $slide = jQuery(next);
//    var w = $slide.outerWidth();
//    var h = $slide.outerHeight();
//    $slide.css({
//       marginTop: (482 - h) / 2,
//       marginLeft: (560 - w) / 2
//    });
//};



$('#slideshow > img').bind('load', function(e) {
    counter = counter - 1;
    if (counter == 0) {
        // I'm doing some other stuff when initializing cycle
        startCycle();
        // My images all start with visibility:hidden so they don't show
        // before cycle hides them in a 'stack', so ...
        $('#slideshow > img').css('visibility', 'visible');
    }
});

// Decare the function that center the images...
function onBefore(curr,next,opts) {
    var $slide = jQuery(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (500 - h) / 2,
        marginLeft: (635 - w) / 2
    });
};


$(document).ready(function() {
    $('#slideshow').cycle({
	 fx:     'fade', 
    next:   '#next', 
	pause: 0,
	speed: 500,
	before: onBefore,
    prev:   '#prev',
	pause:	'#pause',
	pager:  '.thumbs',
	pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
	pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
						//Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 
					//	 return '<li><a href="#"><img src="' + src + '"  height="90" /></a></li>'; 
                } 
	});
$(function() {//Pause slideshow on page load
				$("#slideshow").cycle('pause');  });


	//Get our elements for faster access and set overlay width
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 15;
	//Get menu width
	var divWidth = div.width();
	//Remove scrollbars	
	div.css({overflow: 'hidden'});
	//Find last image container
	var lastLi = ul.find('li:last-child');
	//When user move mouse over menu
	div.mousemove(function(e){
		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(left);
	});
});
});