$(document).ready(function () {


    $(".spotPicture").hover(
        function () {
        var colorSrc = $(this).attr("id");
        $(this).attr("id", $(this).attr("src"));
        $(this).attr("src", colorSrc);

        if ($.browser.msie) {
        $(this).attr("usemap", $(this).attr("style"));
        $(this).removeAttr("style");
        }
        },
        function () {

        var colorSrc = $(this).attr("src");
        $(this).attr("src", $(this).attr("id"));
        $(this).attr("id", colorSrc);


        if ($.browser.msie) {
        $(this).attr("style", $(this).attr("usemap"));
        }
    });



    $(window).load(function () {

        /*Img gray scale*/
        $("#spotBoxHolder .spotbox").each(function () {
            var imgObj = $("img", this)[0];
            $(".spotPicture", this).attr("id", $(".spotPicture", this).attr("src"));

            if ($.browser.msie) {
                grayscaleImageIE(imgObj);
            }
            else if ($.browser.webkit) {
                imgObj.src = grayscaleImage(imgObj);
            }
            else {
                imgObj.src = grayscaleImage(imgObj);
            }
        });

    });

    /*
    function browserSetup() {
        $("#spotBoxHolder").css("height", $(window).height() - 267);
    }

    $(window).resize(function () {
        browserSetup();

    });

    browserSetup();
    */
});




function grayscaleImageIE(imgObj) {
    imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}

function grayscaleImage(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');

    var imgW = imgObj.width;
    var imgH = imgObj.height;

    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for (var y = 0; y < imgPixels.height; y++) {
        for (var x = 0; x < imgPixels.width; x++) {
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
    }

    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}