$(document).ready(function() {
    $carousel = document.getElementById("carousel_ul");

    if ($carousel)
        if (ThumbnailsWiderThanPage()) {
        /*move he last list item before the first item. The purpose of this is 
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
    } else {
        $('#left_scroll').toggleClass('hide_scroll_bar', true);
        $('#right_scroll').toggleClass('hide_scroll_bar', true);
        $('#carousel_ul').css({ 'left': '0px' });
    }
});

//FUNCTIONS BELOW
function ThumbnailsWiderThanPage() {
    //Check to see how wide the total amount of images are
    var item_count = $("#carousel_ul > li").size();
    var total_thumbnail_width = item_count * ($('#carousel_ul li').outerWidth() + 10);
    var carousel_width = $("#carousel_inner").width();

    //if they all fit on the screen then don't show the navigate buttons
    if (total_thumbnail_width < carousel_width) {

        return false;
    }

    return true;

}

//slide function  
function slide(where) {

    //get the item width
    var item_width = $('#carousel_ul li').outerWidth() + 10;

    /* using a if statement and the where variable check 
    we will check where the user wants to slide (left or right)*/
    if (where == 'left') {
        //...calculating the new left indent of the unordered list (ul) for left sliding
        var left_indent = parseInt($('#carousel_ul').css('left')) + (item_width);

    } else {
        //...calculating the new left indent of the unordered list (ul) for right sliding
        var left_indent = parseInt($('#carousel_ul').css('left')) - (item_width);
    }

    //make the sliding effect using jQuery's animate function... '
    $('#carousel_ul:not(:animated)').animate({ 'left': left_indent }, 500, function() {

        /* when the animation finishes use the if statement again, and make an ilussion
        of infinity by changing place of last or first item*/
        if (where == 'left') {
            //...and if it slided to left we put the last item before the first item
            $('#carousel_ul li:first').before($('#carousel_ul li:last'));

        } else {
            //...and if it slided to right we put the first item after the last item
            $('#carousel_ul li:last').after($('#carousel_ul li:first'));
        }

        if (ThumbnailsWiderThanPage()) {
            $('#carousel_ul').css({ 'left': '-95px' });
        }
    }
);

}

(function($) {
    $.fn.gallery1 = function(options) {
        var defaults = {

    };

    var options = $.extend(defaults, options);

    return this.each(function() {

        //Grabs a list of all child items under
        //the container that has been passed to the query
        var list = $(this);

        //Generate a a div tag which
        //will surround the main image
        var galleryImg = $("<div id=\"GalleryMainImage\"></div>");

        //Adds this div generated above
        //before the list of thumbnails
        list.before(galleryImg);

        var CopyrightText = $("<div id=\"CopyrightText\"></div>");
        list.before(CopyrightText);

        //Find all items in the li control
        var items = list.find("li");

        //loop through each of these items
        items.each(function() {
            //Grabs the individual item, finds the 'a'
            //anchor tag and the 'span' tag, stores the values

            var item = $(this);
            var link = $(item.find("a").get(0));
            var textDom = $(item.find("span").get(0));
            var imageThumbnail = $(item.find("img").get(0));

            //imageThumbnail.fadeTo("fast", 0.5);


            //Grabs the href from the anchor link
            var src = link.attr('href');
            //Grabs everything in the span tag
            var text = textDom.html();

            if (text == '') {
                text = "&nbsp;";
            }

            //Handles the click event when clicking the the 'a' tag
            link.click(function() {
                //Add html pointing at the actual full size image
                galleryImg.html("<img src='" + src + "' alt=''>");
                CopyrightText.html("<div>" + text + "</div>");
                //Return false to stop the link firing us off somewhere
                return false;
            });
        });


        //We want to find the first image being displayed on the page
        //If there are enough images to make the scroll buttons appear
        //then the carousel will infinitely loop the images (so the user can keep
        //on clicking through the series of images). The way this works is by shifting
        //the last image in the series to sit just before the first image (but outside the visible
        //div so it is hidden). Therefore when this happens we need to get the second image in the series 
        //to correctly 
        var first;
        if (ThumbnailsWiderThanPage()) {
            //Fake a click on the first thumbnail to show the 
            //image when a user arrives on the page
            var first = $($($(items).get(1)).find("a").get(0));
        } else {
            var first = $($($(items).get(0)).find("a").get(0));
        }

        first.click();




    }); //this.each



} //function
})(jQuery);