/* Kræver Jquery
 * Der skal på hvert billede lave en attribut ved navn "org" som skal indeholde det samme som 
 * der indsættes i src!
 * i "ready" kaldes StartGrayscale(selector), selector er det eller de elementer der skal bruges
*/

function StartGrayscale(elements) {

    $(elements).each(function(){GrayOut($(this))});

    $(elements).mouseover(function () {

        if ($.browser.msie) {
            $(this).css('filter', '');
        }
        else {
            $(this).attr('src', $(this).attr('org'));
        }
    });

    $(elements).mouseout(function () {
        GrayOut($(this));
    });

}

function GrayOut(element) { 

        var imgObj = $(element).get(0);

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


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();
}