/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
$(function () {
    /*
     $("#colorpicker").button({
     label: "Farbe wählen"
     });
     */
    $("#colorpicker_close").button({
        label: "Anwenden"
    });
    $("#colorpicker_classify").button({
        label: "Klassifizieren"
    });
    var sliderobj;
    var colorcalculator;

    
    $("#classified_name").autocomplete({
        source: function (request, response) {

            $.post('./ajax/color_service.php', {
                name: request.term,
                action: 'search'

            }, function (data) {
                if (data != null) {
                    // $('#debug').html(data);
                    daten = jQuery.parseJSON(data);
                    anzahl = daten.length;
                    cache = new Array(new Array(), new Array(), new Array(), new Array(), new Array());
                    for (var i = 0; i < anzahl; i++) {
                        cache[0][i] = daten[i].name;
                        cache[1][i] = daten[i].id;
                        cache[2][i] = daten[i].r;
                        cache[3][i] = daten[i].g;
                        cache[4][i] = daten[i].b;
                    }
                    response(cache[0]);
                }



            });
        },
        change: function (event, ui) {

        },
        select: function (event, ui) {


            for (var i = 0; i < anzahl; i++) {
                if (ui.item.value == cache[0][i]) {

                    colors = new Array(cache[2][i], cache[3][i], cache[4][i]);
                    sliderobj.adjustcolor(colors);
                    sliderobj.updatetestcolor();

                }
            }
            //var zutat = ui.item.value;

        }
    });


    var cg = new Array('color-1', 'color-2', 'color-3', 'color-4', 'color-5');
    function hex2rgb(hex) {

        if (hex !== undefined) {
            var res = hex.match(/[a-f0-9]{2}/gi);
            return res && res.length === 3
                    ? res.map(function (v) {
                        return parseInt(v, 16)
                    })
                    : null;
        }
    }
    function rgb2hex(rgb) {
        var hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
        }
        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
    }

    function JSlider() {

        var Slider = {
            setvalue: function (wert, color) {
                $('#' + color + "slider").slider({value: wert});
            },
            adjustcolor: function (colors) {
                if (colors !== undefined) {
                    $("#rvalue").val(colors[0]);
                    this.setvalue(colors[0], 'r');
                    $("#gvalue").val(colors[1]);
                    this.setvalue(colors[1], 'g');
                    $("#bvalue").val(colors[2]);
                    this.setvalue(colors[2], 'b');
                } else {
                    $("#rvalue").val(128);
                    this.setvalue(128, 'r');
                    $("#gvalue").val(128);
                    this.setvalue(128, 'g');
                    $("#bvalue").val(128);
                    this.setvalue(128, 'b');
                }
            },
            updatetestcolor: function () {

                r = $("#rvalue").val();
                g = $("#gvalue").val();
                b = $("#bvalue").val();
                rgb = "rgb(" + r + "," + g + "," + b + ")";
                ziel = $("#target").val();
                where = ziel.split('-');
              
                $('.' + where[0] + '-' + where[1]).css(where[2], rgb2hex(rgb));
                $("#" + ziel).val(rgb2hex(rgb));
                $("#hexvalue").val(rgb2hex(rgb));
            },
            setupslider: function (color) {
                $('#' + color + "slider").slider({
                    range: "max",
                    min: 0,
                    max: 255,
                    step: 1,
                    value: 0,
                    slide: function (event, ui) {
                        $('#' + color + "value").val(ui.value);
                        name = $(this).attr('id');
                        if (name == "hslider") {
                            brightness();
                        } else {
                            Slider.updatetestcolor();
                        }
                    }
                });
            }
        }
        return Slider;
    }
    function HSlider() {

        var Slider = {
            setvalue: function (wert, color) {
                $('#' + color + "slider").attr("max", '255');
                $('#' + color + "slider").val(wert);
            },
            adjustcolor: function (colors) {
                if (colors !== undefined) {
                    $("#rvalue").val(colors[0]);
                    this.setvalue(colors[0], 'r');
                    $("#gvalue").val(colors[1]);
                    this.setvalue(colors[1], 'g');
                    $("#bvalue").val(colors[2]);
                    this.setvalue(colors[2], 'b');
                } else {
                    $("#rvalue").val(128);
                    this.setvalue(128, 'r');
                    $("#gvalue").val(128);
                    this.setvalue(128, 'g');
                    $("#bvalue").val(128);
                    this.setvalue(128, 'b');
                }
            },
            updatetestcolor: function () {

                r = $("#rvalue").val();
                g = $("#gvalue").val();
                b = $("#bvalue").val();
                rgb = "rgb(" + r + "," + g + "," + b + ")";
                ziel = $("#target").val();
                $('#' + ziel).val(rgb2hex(rgb));

                where = ziel.split('-');
                $('.' + where[0] + '-' + where[1]).css(where[2], rgb2hex(rgb));
                $("#hexvalue").val(rgb2hex(rgb));


            },
            setupslider: function (color) {

                $('#' + color + "slider").on("input", function () {
                    $(this).attr("max", '255');
                    $(this).attr("min", '0');
                    $(this).attr("step", '1');
                    $('#' + color + "value").val($(this).val());
                    
                    Slider.updatetestcolor();
                });
            }
        }
        return Slider;
    }
    function setup() {
        //$.cookie("colors",null);

        var param = JSON.parse($.cookie("colors"));
        if (param !== null) {
            if (param.length > 0) {
                //alert(param);
                if (param[0].length < 4) {
                    param = null;
                }
            }
        }
        if (param !== null) {
           

            for (i = 0; i < cg.length; i++) {

                $('#' + cg[i] + "-background").val(param[2 * i]);
                $('.' + cg[i]).css('background-color', param[2 * i]);
                $('#' + cg[i] + "-color").val(param[2 * i + 1]);
                $('.' + cg[i]).css('color', param[2 * i + 1]);

            }


        } else {
            
            for (i = 0; i < cg.length; i++) {

                bodycolor = $('.' + cg[i]).css('background-color');
                textcolor = $('.' + cg[i]).css('color');
               
                if (bodycolor !== undefined) {
                    
                    $('#' + cg[i] + "-background").val(rgb2hex(bodycolor));
                    $('#' + cg[i] + "-color").val(rgb2hex(textcolor));
                }else{
                     
                }
            }

        }
        ziel = $("#target").val();
        first_color = $('#' + ziel).val();

        $("#hexvalue").val(first_color);

        colors = hex2rgb($("#hexvalue").val());

        sliderobj.adjustcolor(colors);


    }

    ColorCalculator = function () {


        this.distance = function (color) {
            if (color !== null) {
                $.post('./ajax/color_service.php', {
                    r: color[0],
                    g: color[1],
                    b: color[2],
                    action: 'classify'
                }, function (data) {

                    daten = jQuery.parseJSON(data);
                    $("#classified_name").val(daten.name);
                });
            } else {
                $("#classified_name").html('Kein Farbwert');
            }
        }


    }
    
    b=getBrowser();
   
    if (Modernizr.inputtypes.range && b.name!='mozilla') {
        $('#jqueryslider').remove();
        sliderobj = new HSlider();
    } else {
        $('#htmlslider').remove();
        sliderobj = new JSlider();
    }
    sliderobj.setupslider("r");
    sliderobj.setupslider("g");
    sliderobj.setupslider("b");
    setup();



    $("#colorpicker_dialog").dialog(
            {
                autoOpen: false,
                height: "auto",
                width: 900,
                modal: true,
                draggable: false,
                dialogClass: "dlg-no-title",
                title: 'Farbe auswählen',
                resizable: false
            }
    );
    $('#colorpicker').click(function () {
        setup();

        $("#colorpicker_dialog").dialog("open");
        $("#hexvalue").focus();
    });
    $('#target').change(function () {
        ziel = $("#target").val();

        color = $('#' + ziel).val();
        $('[class^=color]').css("border", "0px solid transparent");
        $('[class^=menu]').css("border", "0px solid transparent");
        where = ziel.split('-');
        $('.' + where[0] + '-' + where[1]).css("border", "3px solid red");

        $("#hexvalue").val(color);
        hex = $("#hexvalue").val();
        colors = hex2rgb(hex);
        sliderobj.adjustcolor(colors);
    });
    $("#colorpicker_classify").click(function () {



        color = $("#hexvalue").val();
        colorcalculator = new ColorCalculator();
        colors = hex2rgb(color);
        colorcalculator.distance(colors);


    });

    $('#colorpicker_close').click(function () {
        cookie_array = new Array();

        for (i = 0; i < cg.length; i++) {
            bodycolor = $('.' + cg[i]).css('background-color');

            textcolor = $('.' + cg[i]).css('color');

            if (textcolor !== undefined) {
                cookie_array.push(rgb2hex(bodycolor));
                cookie_array.push(rgb2hex(textcolor));
            } else {
                alert('Keine Farbklasse vorhanden');
            }
        }
        $('[class^=color]').css("border", "0px solid transparent");
        $('[class^=menu]').css("border", "0px solid transparent");
        $.cookie('colors', JSON.stringify(cookie_array), {path: '', expires: 30});
        $("#colorpicker_dialog").dialog("close");
    });
    $("#classified_name").autocomplete("option", "appendTo", "#colorpicker_dialog");
});