/**
 *
 * HTML5 Color Picker
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Script Tutorials
 * http://www.script-tutorials.com/
 */

$(function () {
    var bCanPreview = true; // can preview

    // create canvas and context objects
    var canvas = document.getElementById('picker');
    var ctx = canvas.getContext('2d');

    var hex;

    // drawing active image
    var image = new Image();
    image.onload = function () {
        //ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
        ctx.drawImage(image, 0, 0, 150, 150); // draw the image on the canvas
    }

    // select desired colorwheel
    image.src = '../Veiculos/img/formas/colorwheel.png';

    $('#picker').mousemove(function (e) { // mouse move handler
        if (bCanPreview) {
            // get coordinates of current position
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);

            // get current pixel
            var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
            var pixel = imageData.data;

            // update preview color
            var pixelColor = "rgb(" + pixel[0] + ", " + pixel[1] + ", " + pixel[2] + ")";
            $('#btn_color svg path, #btn_color svg rect, #btn_color svg circle, #btn_color svg polygon').css('fill', pixelColor);

            // update controls
            //$('#rVal').val(pixel[0]);
            //$('#gVal').val(pixel[1]);
            //$('#bVal').val(pixel[2]);
            //$('#rgbVal').val(pixel[0] + ',' + pixel[1] + ',' + pixel[2]);

            var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
            //$('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
            hex = '#' + ('0000' + dColor.toString(16)).substr(-6);
        }
    });
    $('#picker').click(function (e) { // click event handler
        bCanPreview = !bCanPreview;

    });

    $('#btn_color').click(function (e) { // preview click
        $('.colorpicker').fadeToggle("fast", "linear");
        bCanPreview = true;
    });
});