$(document).ready(function() {

    var templates = {
	previous: '<a id="previous" href="#previous_slide"><span class="buttonLabel">Previous</span></a>',
	next: '<a id="next" href="#next_slide"><span class="buttonLabel">Next</span></a>',
	controls: '<span class="controls"></span>',
	pager: '<span id="pager"></span>',
	speedDial: '<li id="speedDial" class="clearfix"><h2>Please Select an Image</h2></li>',
	nav: '<div id="nav"></div>'
    };

    var container = $("#slides");
    var speedDial = $(templates.speedDial);
    var pager = $(templates.pager);

    var buildSpeedDial = function() {
	$("#slides h3").each(function(i) {
	    var link = $('<a href="#goto_slide">'+ $(this).text()  +'</a>');
	    if (i === 0) {
		link.addClass("activeSlide");
	    }
	    speedDial.append(link);
	    link.click(function() {
		$(speedDial).slideUp("slow");
		container.cycle(i);
		return false;
	    });
	});
    };

    var buildPager = function() {
	$("#slides h3").each(function(i) {
	    var indicator = $('<a class="slide">&nbsp;</a>');
	    if (i === 0) {
		indicator.addClass("activeSlide");
	    }
	    pager.append(indicator);
	});
    };

    var callbacks = {
	onBefore: function(slide, nextSlide, options, flag) {
	    container.cycle.updateActivePagerLink(speedDial, options.nextSlide);
	},
	onAfter: function(slide, nextSlide, options, flag) {
	    container.cycle.updateActivePagerLink(speedDial, options.currSlide);
	    container.cycle.updateActivePagerLink(pager, options.currSlide);
	},
	onPrevNextClick: function(isNext, index, slide) {
	    $(speedDial).slideUp("slow");
	}
    };

    $(pager).click(function(){
    	$(speedDial).slideToggle("slow");
    });

    buildSpeedDial();
    buildPager();

    container.append(speedDial).after(
	$(templates.nav).append(pager)
	    .append(
		$(templates.controls)
		    .append(templates.previous)
			.append(templates.next)
	    )
    );

    container.cycle({
	fx: 'scrollHorz',
	next: '#next',
	prev: '#previous',
	timeout:0,
	before: callbacks.onBefore,
	after: callbacks.onAfter,
	prevNextClick: callbacks.onPrevNextClick,
	slideExpr: 'img'
    });


});