// **********************************************
// JavaScript gallery
// @author  - Simon Pollard for Deckchair UK Ltd
// @version - 1.0
// @date    - June '10
// Requires jQuery and jQuery plugin timers (http://plugins.jquery.com/project/timers)

// On page load
$(function() {

    // Get all the images
    $items = $('#index_gallery').children('img');

    // Now make an array of the image src
    images=new Array();
    $items.each(function(){
        images.push($(this).attr("src"));
    });

    // Now make an array of the image alt tag (Project name)
    names=new Array();
    $items.each(function(){
        names.push($(this).attr("alt"));
    });

    // Now make an array of the image title (url and item number)
    urls=new Array();
    project_id=new Array();
    $items.each(function(){
        $testing = $(this).attr("title").split(" ");
        urls.push($testing[1]);
        project_id.push($testing[0]);
    });


    // Set the url of the link to the first project
    $('#index_gallery').attr("href","http://www.deckchair.co.uk/portfolio/web/"+project_id[0]);

    // Remove the title from the image
    $('#index_gallery .0').attr("title","view in our portfolio");

    // Remove all the hidden images from the DOM
   $('.gallery_hidden').remove();

   // Get the total number of images (minus 1 as the array starts at 0)
   images_total = (images.length-1);
   // Create a counter, which starts at 0 (first image in array)
   images_count = 0;

   // Add the site labels
   $('#index_gallery').append('<span class="browser_label">'+names[0]+'</span>');
   $('#index_gallery').append('<span class="url">http://'+urls[0]+'</span>');


   // Now add the functionality to the buttons (divs used for better code)
   // These need to be outside of the a tag
   $('#index_top_row .column2').append('<div class="gallery_prev"></div>');
   $('#index_top_row .column2').append('<div class="gallery_next"></div>');


   // Add functionality to clicking the gallery
   $(".gallery_next").mousedown(function() {
       nextImage();
   });


   // Add functionality to clicking the gallery
   $(".gallery_prev").mousedown(function() {
       prevImage();
   });

   // Start off the automatic change image loop
   timer();

   // Add functionality to stop timer when user is hovering over gallery
   $("#index_top_row .column2").mouseenter(function() {
        $("#index_top_row .column2").stopTime();
    });

    // Start timer again once they leave the gallery
    $("#index_top_row .column2").mouseleave(function() {
        timer();
    }); 

});

// Basic timer on loop to call next image function
function timer() {
   $("#index_top_row .column2").everyTime(6000, function() {
        nextImage();
   });
}

// Change the current gallery image
function nextImage() {
   // Remove the click events from the prev and next divs
   $(".gallery_next").unbind();
   $(".gallery_prev").unbind();
   // Clear the label
   $(".label").html("");
   $(".browser_label").html("");
   $(".url").html("");
   // If this is the last image in the array
   if(images_count==images_total) {
       // We need to go back to the start, so add in the first image of the array
       $("#index_gallery").prepend('<img class="0" src="'+images[0]+'" alt="image" title="view in our portfolio">');
       // Now fade out the current image
       $('.'+images_count).fadeOut('slow', function() {
                // Once animation complete remove it
                $('.'+images_count).remove();
                // Add click event to the new image
                $(".gallery_next").mousedown(function() {
                   nextImage();
                });
                $(".gallery_prev").mousedown(function() {
                   prevImage();
                });
                // Update the label
                $(".label").html('<b>Project</b> '+names[0]);
                $(".browser_label").html(names[0]);
                $(".url").html('http://'+urls[0]);
                $('#index_gallery').attr("href","http://www.deckchair.co.uk/portfolio/web/"+project_id[0]);
                // Reset the image count
                images_count = 0;
        });
   } else {
       $("#index_gallery").mousedown(function() {});
       // Add in the next image
       $("#index_gallery").prepend('<img class="'+(images_count+1)+'" src="'+images[(images_count+1)]+'" alt="image" title="view in our portfolio">');
       // Fade out the current image
       $('.'+images_count).fadeOut('slow', function() {
                // Once animation complete remove it
                $('.'+images_count).remove();
                // Add click event to the new image
                $(".gallery_next").mousedown(function() {
                   nextImage();
                });
                $(".gallery_prev").mousedown(function() {
                   prevImage();
                });
                // Update the label
                $(".label").html('<b>Project</b> '+names[(images_count+1)]);
                $(".browser_label").html(names[(images_count+1)]);
                $(".url").html('http://'+urls[(images_count+1)]);
                $('#index_gallery').attr("href","http://www.deckchair.co.uk/portfolio/web/"+project_id[(images_count+1)]);
                // Update the image count
                images_count ++;
        });
   }
}

// Change the current gallery image
function prevImage() {
   // Remove the click events from prev and next divs
   $(".gallery_next").unbind();
   $(".gallery_prev").unbind();
   // Clear the label
   $(".label").html("");
   $(".browser_label").html("");
   $(".url").html("");
   // If this is the last image in the array
   if(images_count==0) {
       // We need to go back to the start, so add in the first image of the array
       $("#index_gallery").prepend('<img class="'+images_total+'" src="'+images[images_total]+'" alt="image" title="view in our portfolio">');
       // Now fade out the current image
       $('.'+images_count).fadeOut('slow', function() {
                // Once animation complete remove it
                $('.'+images_count).remove();
                // Add click event to the new image
                $(".gallery_next").mousedown(function() {
                   nextImage();
                });
                $(".gallery_prev").mousedown(function() {
                   prevImage();
                });
                // Update the label
                $(".label").html('<b>Project</b> '+names[(images_total)]);
                $(".browser_label").html(names[(images_total)]);
                $(".url").html('http://'+urls[(images_total)]);
                $('#index_gallery').attr("href","http://www.deckchair.co.uk/portfolio/web/"+project_id[images_total]);
                // Set the image count to the last item
                images_count = images_total;
        });
   } else {
       $("#index_gallery").mousedown(function() {});
       // Add in the next image
       $("#index_gallery").prepend('<img class="'+(images_count-1)+'" src="'+images[(images_count-1)]+'" alt="image" title="view in our portfolio">');
       // Fade out the current image
       $('.'+images_count).fadeOut('slow', function() {
                // Once animation complete remove it
                $('.'+images_count).remove();
                // Add click event to the new image
                $(".gallery_next").mousedown(function() {
                   nextImage();
               });
                $(".gallery_prev").mousedown(function() {
                   prevImage();
                });
                // Update the label
                $(".label").html('<b>Project</b> '+names[(images_count-1)]);
                $(".browser_label").html(names[(images_count-1)]);
                $(".url").html('http://'+urls[(images_count-1)]);
                $('#index_gallery').attr("href","http://www.deckchair.co.uk/portfolio/web/"+project_id[(images_count-1)]);
                // Reduce the count by one
                images_count --;
        });
   }
}