var canvasData;

/*
 * Calculate the x,y coordinate of the given element
 */
jQuery.fn.elementlocation = function() {
    var curleft = 0;
    var curtop = 0;
    var obj = this;

    do {
        curleft += obj.attr('offsetLeft');
        curtop += obj.attr('offsetTop');

        obj = obj.offsetParent();
    } while ( obj.attr('tagName') != 'BODY' );
    return ( {x:curleft, y:curtop} );
};

    function init_canvas(image_url)
    {
        function CreateDelegate(contextObject, delegateMethod)
        {
            return function()
            {
                return delegateMethod.apply(contextObject, arguments);
            }
        }

        function imgTesting_onload()
        {
            $('#cn').attr('width', this.naturalWidth);
            $('#cn').attr('height', this.naturalHeight);

            var canvas = document.getElementById('cn');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(this, 0, 0);
            canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            $('#src-image').unbind('mousemove');
            $('#src-image').unbind('click');

            $("#src-image").mousemove( function( eventObj ) {

                var location = $("#src-image").elementlocation();
                var scale = this.naturalWidth / 500.0;
                var x = parseInt(scale * (eventObj.pageX - location.x));
                var y = parseInt(scale * (eventObj.pageY - location.y));
                /*
                $("#x-coordinate").text( x );
                $("#y-coordinate").text( y );
               */
                var idx = (x + y * canvas.width) * 4;

                // The RGB values
                r = canvasData.data[idx + 0];
                g = canvasData.data[idx + 1];
                b = canvasData.data[idx + 2];
                $("#r-coordinate").text( r );
                $("#g-coordinate").text( x );
                $("#b-coordinate").text( eventObj.pageY - location.y );
                $("#rgb").css('background-color', 'rgb('+r+','+g+','+b+')');

            });

            $('#src-image').click( function() {
                $('#results').fadeOut('fast', function() {
                    if ($('#instructions').is(':visible')) {
                        $('#instructions').fadeOut('fast', function() {
                            $('#loader').fadeIn('fast');});
                    } else {
                        $('#loader').fadeIn('fast');
                    }

                    $.post('get.php',
                           {r: r, g: g, b: b},
                           function (json) {
                               $('#loader').fadeOut('fast', function() {
                                    var res = eval(json);
                                    if (res.res == 'ok') {
                                        var html = '<ul>';
                                        for (id in res.result) {
                                            html += '<li><a href="http://goodfap.com/' + res.result[id].url + '" target="_blank">';
                                            html += '<img class="thumb" alt="' + res.result[id].title + '" src="http://d35byjb6r5frk9.cloudfront.net/thumbs/' + res.result[id].thumb_filename + '"/>';
                                            html += '<div class="title">' + res.result[id].title + '</div>';
                                            html += '</a></li>';
                                        }
                                        html += '</ul>';
                                        $('#results').html(html);
                                        $('#results').fadeIn('fast');
                                    } else {
                                        alert(res.error);
                                    }
                               });
                           });
                });
            });
            $('#src-image').attr('src', this.src);
        }

        var imgTesting = new Image();
        imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
        imgTesting.src = image_url;

    }

    $(document).ready( function() {
        init_canvas('unicorn-rainbow.jpg');
        $('#image-select').change(function() {
            init_canvas($('#image-select').val());
        });
    });


      function go() {
            for (var x = 0; x < canvasData.width; x++) {
                for (var y = 0; y < canvasData.height; y++) {

                    // Index of the pixel in the array
                    var idx = (x + y * canvas.width) * 4;

                    // The RGB values
                    var r = canvasData.data[idx + 0];
                    var g = canvasData.data[idx + 1];
                    var b = canvasData.data[idx + 2];

                    // Update the values of the pixel;
                    var gray = (r + g + b) / 3;
                    canvasData.data[idx + 0] = gray;
                    canvasData.data[idx + 1] = gray;
                    canvasData.data[idx + 2] = gray;
                }
            }
            ctx.putImageData(canvasData, 0, 0);
        }