var imageWidth = 1280;
var imageHeight = 800;


jQuery(document).ready(function () {

    jQuery.preloadCssImages({ statusBarEl: '#Status' });

    var FullscreenrOptions = { width: imageWidth, height: imageHeight, bgID: '#image' };
    jQuery.fn.fullscreenr(FullscreenrOptions);

    jQuery("#access li a").address();


//  jQuery('#loader img').remove(); // tidy up, and remove the preloader img


    jQuery.address.init(function (event) {

        href = event.value.toString().replace('/', '');
        if (href != '') {

            jQuery('.active').removeClass('active');
            jQuery('#image-collection li.first.' + href).addClass('active');

            getimage();
            controlpanel();
            return false;
        }
        else {

            jQuery('#image-collection li:nth-child(1)').addClass('active');  // Set the first image to be active


            var imgname = jQuery('#image-collection  li:nth-child(1) .imgsrc').attr("src")  // Copy image url to preloader img url

            jQuery('#preloaderimg').hide(); // Lets hide the pre loader, whilst the first image loads

            var img = new Image();  // Create the image placeholder for our preloader

            jQuery(img).load(function () {


                jQuery("#image").attr("src", imgname); // Lets assign the preloaded image URL, to the fullscreen image
                jQuery("#image").show(); // Show the image
                jQuery("#caption").show(); // Show the caption

                nextprev();
                controlpanel();
                gettitle();
            }).error(function () {
                // notify the user that the image could not be loaded
            }).attr('src', imgname);
        }

    });

    jQuery.address.change(function (event) {


        href = event.value.toString().replace('/', '');

        if (href == 'contact') {
            jQuery('.active').removeClass('active');

            jQuery('li.contact').addClass('active');

            jQuery('#caption').html(jQuery('li.contact').html());


            getimage();
            controlpanel();
            jQuery('#caption').show();
            return false;
        }

   

        if (href != '') {

            jQuery('.active').removeClass('active');
            jQuery('#image-collection li.first.' + href).addClass('active');

            getimage();
            controlpanel();
            return false;
        }

    });

    jQuery("#next").click(function (e) {

        e.preventDefault();

        if (jQuery('#image-collection li:nth-child(1)').hasClass('active')) {
            jQuery("#footer").fadeOut('10');
        };

        var jQuerytoHighlight = jQuery('.active').next().length > 0 ? jQuery('.active').next() : jQuery('#image-collection li').first();
        jQuery('.active').removeClass('active');
        jQuerytoHighlight.addClass('active');

        getimage();
        controlpanel();


    });



    jQuery("#prev").click(function (e) {

        e.preventDefault();

        var jQuerytoHighlight = jQuery('.active').prev().length > 0 ? jQuery('.active').prev() : jQuery('#image-collection li').last();
        jQuery('.active').removeClass('active');
        jQuerytoHighlight.addClass('active');


        getimage();
        controlpanel();

    });


    jQuery("#access li a").click(function (e) {

        e.preventDefault();
        var href = jQuery.address.value().replace('/', '')
        jQuery('.active').removeClass('active');
        jQuery('#image-collection li.first.' + href).addClass('active');

        getimage();
        controlpanel();
    });






});


 //FUNCTIONS
 //FUNCTIONS
//FUNCTIONS


function nextprev() {  // Handles the next/prev buttons, if we need to show them or not

    if (jQuery('#image-collection li:nth-child(1)').hasClass('active')) {
        jQuery("#prev").hide();
    }
    else {
        jQuery("#prev").show();
    }


    if (jQuery('#image-collection li:last-child').hasClass('active')) {
        jQuery("#next").hide();
    }
    else {
        jQuery("#next").show();
    }

    jQuery("#next").removeClass();
    jQuery("#prev").removeClass();
    jQuery("#next").addClass(jQuery('#image-collection li.active').attr('class'));
    jQuery("#prev").addClass(jQuery('#image-collection li.active').attr('class'));

}




function gettitle() { // Handles the title caption
    jQuery('#caption').stop();
    if (jQuery('#image-collection li.active').hasClass('hc'))
    {
        if (jQuery('#image-collection li.active').hasClass('contact') || jQuery('#image-collection li.active').hasClass('home')) {
            jQuery('#caption').html(jQuery('#image-collection li.active').html());
            jQuery('#caption').removeClass().addClass(jQuery('#image-collection li.active').attr('class'));
            jQuery('#caption').show();
        }
        else {
            jQuery('#caption').html(jQuery('#image-collection li.active').html());
            jQuery('#caption').removeClass().addClass(jQuery('#image-collection li.active').attr('class'));
            jQuery('#caption').show();
        }
        jQuery.address.value(jQuery('#image-collection li.active').attr('category'));  
    }
    else
    {
    jQuery('#caption').hide();
    }
}


function getimage() { // Our Image preloader - where the magic happens!


    var imgname = jQuery('#image-collection li.active img.imgsrc').attr("src").toString();
    var position = jQuery('#image-collection li.active p.position').text().toString();

    jQuery('#preloaderimg').show();

    var img = new Image();
        
        jQuery(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            jQuery('#loader').removeClass('loading').append(this);
            jQuery('#preloaderimg').hide();
            jQuery("#image").attr("src", imgname);
            jQuery("#position").text(position);
            jQuery("#image").show(); // Show the image
            jQuery("#caption").show(); // Show the caption

            gettitle();
            nextprev();
         //   jQuery('#loader img').remove();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', imgname);


    }


    function controlpanel() { // Control panel

    jQuery("#footer").hover(function (e) {
        jQuery("#footer").show();
       });


              if (jQuery('#image-collection li:nth-child(1)').hasClass('active')) {
                   jQuery('#footer').hide();
                        jQuery("#footer").fadeIn('10');

              }
              else{
         

                      jQuery("#footer-wrap").mouseenter(function() {
                      jQuery("#footer").fadeIn('10');
                      }).mouseleave(function() {
                       jQuery("#footer").fadeOut('10');
                       });

                     jQuery("#footer").hover(function (e) {
                     jQuery("#footer").show();
                     });


                 }
    
}