/*
* imgPreview jQuery plugin
* Copyright (c) 2009 James Padolsey
* j@qd9.co.uk | http://james.padolsey.com
* Dual licensed under MIT and GPL.
* Updated: 09/02/09
* @author James Padolsey
* @version 0.22
*/
(function ($) {

    $.expr[':'].linkingToImage = function (elem, index, match) {
        // This will return true if the specified attribute contains a valid link to an image:
        return !!($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i));
    };

    $.fn.imgPreview = function (userDefinedSettings) {

        var s = $.extend({

            /* DEFAULTS */

            // CSS to be applied to image:
            imgCSS: {},
            // Distance between cursor and preview:
            distanceFromCursor: { top: 10, left: 10 },
            // Boolean, whether or not to preload images:
            preloadImages: false,
            // Callback: run when link is hovered: container is shown:
            onShow: function () { },
            // Callback: container is hidden:
            onHide: function () { },
            // Callback: Run when image within container has loaded:
            onLoad: function () { },
            // ID to give to container (for CSS styling):
            containerID: 'imgPreviewContainer',
            // Class to be given to container while image is loading:
            containerLoadingClass: 'loading',
            // Prefix (if using thumbnails), e.g. 'thumb_'
            thumbPrefix: '',
            // Where to retrieve the image from:
            srcAttr: 'rel'

        }, userDefinedSettings),

        // Grab the Img Container DIV used to display the image and append an img tag to it
        $container = $('<div/>').attr('id', s.containerID)
                        .append('<img/>').hide()
                        .css('position', 'absolute')
                        .appendTo('body'),

        $img = $('img', $container).css(s.imgCSS),

        // Get all valid elements (linking to images / ATTR with image link):
        $collection = this.filter(':linkingToImage(' + s.srcAttr + ')');

        // Re-usable means to add prefix (from setting):
        function addPrefix(src) {
            src = src.replace(/(\/?)([^\/]+)$/, '$1' + s.thumbPrefix + '$2');

            // Marshalls Code - this points to the directory where the 'hover' images are stored
            src = "/content/productinformation/ImagesStone/" + src;
            return src;
        }

        if (s.preloadImages) {
            (function (i) {
                var tempIMG = new Image(),
                    callee = arguments.callee;
                tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr));
                tempIMG.onload = function () {
                    $collection[i + 1] && callee(i + 1);
                };
            })(0);
        }

        $collection
            .mousemove(function (e) {

                $container.css({
                    top: e.pageY + s.distanceFromCursor.top + 'px',
                    left: e.pageX + s.distanceFromCursor.left + 'px'
                });

            })
            .hover(function () {

                var link = this;
                $container
                    .addClass(s.containerLoadingClass)
                    .show();
                $img
                    .load(function () {
                        $container.removeClass(s.containerLoadingClass);
                        $img.show();
                        s.onLoad.call($img[0], link);
                    })
                    .attr('src', addPrefix($(link).attr(s.srcAttr)));
                s.onShow.call($container[0], link);

            }, function () {

                $container.hide();
                $img.unbind('load').attr('src', '').hide();
                s.onHide.call($container[0], this);

            });

        // Return full selection, not $collection!
        return this;

    };

})(jQuery);


$(document).ready(function () {
    // Fires on the Sample page to tick the check box if a sample image is clicked
    $('.selectSample').click(function () {
        // Get a handle on the sample checkbox
        var rel = $(this).attr('rel');

        // the rel element is also used by another jquery function so whip off .jpg (used by other function
        rel = rel.replace(".jpg", "");

        var chkBox = $('#' + rel);
        if ($(chkBox).attr('checked') == true) {
            $(chkBox).attr('checked', false);
        }
        else {
            $(chkBox).attr('checked', true);
        }

        return false;
    });

    // Highlight the last breadcrumb
    $('#breadcrumbUL').children('li:last').find('a:first').addClass('orangeStrong');

    // Attach JQ Datepicker to .datePicker class elements
    if ($('.datePicker').html() != null) {
        // There is a datepicker element on the page
        $('.datePicker').datePicker();
        $('.datePicker').dpSetStartDate('01/01/07');
        $('.datePicker').dpSetEndDate('01/01/20');
        $('.datePicker').dpBlockWeekends();
    }

    // Stick the Search Results Link Value into the hidden field on form and then postback
    $('.SearchResultsPager').click(function () {
        $('#PageNumber').attr('value', $(this).text());
        document['SearchPager'].submit();
        return false;
    });

    // For use on the sample page to show larger image
    $('a.selectSample').imgPreview({ imgCSS: { width: 400} });

    // Switch images on HomePage
    slideSwitch();
});

// Switch images on home page
function slideSwitch() {
    // Get image that is the active one in rotator
    var $activeImage = $('#homeRotator img.active');

    if ($activeImage.length == 0) {
        // No image is active, so grab last one in rotator
        $activeImage = $('#homeRotator img:last');
    }

    // Get the next image in line, if nothing, get the first one
    var $nextImage = $activeImage.next().length ? $activeImage.next()
        : $('#homeRotator img:first');

    // add the 'last-active class to currently active image
    $activeImage.addClass('last-active');

    $nextImage.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $activeImage.removeClass('active last-active');
        });
}

$(function () {
    setInterval("slideSwitch()", 5000);
});