(function($) {

    var thumbs = $("#thumbs > ul");
    var images = $("#images > div");

    $.fn.slideshow = function(options) {
        createThumbs();
	    thumbs.jcarousel({
            initCallback: updateThumbs
        });
        setImage(0);
		if ($.browser.msie && $.browser.version < 8) {
            fixIE();
        }
    };

    function createThumbs() {
        images.each(function(index,div) {

            var title = $(".image-title", div).html();
            var src   = $("img", div).attr('src');

            // Create thumb
			var image_thumb = $("<img />").attr({src: src, title: title, id:'thumb-'+index});

            // Add to thumbs list
			$("<li/>").attr('id','image-thumb-'+index).html(image_thumb).appendTo(thumbs);

            image_thumb.bind('click', function(ev) { setImage(index) });
        });
    }
    function fixIE() {
    }

    function updateThumbs(carousel) {
        images.each(function(index,div) {
            var links = $('a',div);
            var prev = $(links[0]);
            var next = $(links[2]);

            // position buttons
            var height = $('img',div).height();

            var fn_noop = function(ev) { return false };
            var fn_next = function(ev) {
                setImage(index+1);
                carousel.scroll(index+2); 
                return false;
            }
            var fn_prev = function(ev) {
                setImage(index-1);
                carousel.scroll(index); 
                return false;
            }

            if (index == 0) prev.bind('click', fn_noop);
            else {
                prev.bind('click', fn_prev);
                prev.removeClass('prev-image-disabled');
                prev.addClass('prev-image');
            }

            if (index == images.length-1) {
                next.bind('click', fn_noop);
                next.removeClass('next-image');
                next.addClass('next-image-disabled');
            }
            else next.bind('click', fn_next);

        });
    };

    function setImage(index) {
        images.each(function(i,div) {
            if (i == index) {
                $(div).css('display','block');
                var links = $('a',div);
                var prev = $(links[0]);
                var next = $(links[2]);
            }
            else {
                $(div).css('display','none');
            }
        });

        $("#thumbs .active").removeClass('active');
        $("#image-thumb-" + index).addClass('active');
    };
})(jQuery);