$(function () {
    $('#color1').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        },
        onChange: function(hsb, hex, rgb) {
            $('#color1').val(hex);
            $('#color1').css('background-color', '#' + hex);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
        $('#color1').css('background-color', '#' + this.value);
    });
    $('#color2').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        },
        onChange: function(hsb, hex, rgb) {
            $('#color2').val(hex);
            $('#color2').css('background-color', '#' + hex);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
        $('#color2').css('background-color', '#' + this.value);
    });
    $('#color3').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        },
        onChange: function(hsb, hex, rgb) {
            $('#color3').val(hex);
            $('#color3').css('background-color', '#' + hex);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
        $('#color3').css('background-color', '#' + this.value);
    });
    $('#color4').ColorPicker({
        onSubmit: function(hsb, hex, rgb, el) {
            $(el).val(hex);
            $(el).ColorPickerHide();
        },
        onBeforeShow: function () {
            $(this).ColorPickerSetColor(this.value);
        },
        onChange: function(hsb, hex, rgb) {
            $('#color4').val(hex);
            $('#color4').css('background-color', '#' + hex);
        }
    })
    .bind('keyup', function(){
        $(this).ColorPickerSetColor(this.value);
        $('#color4').css('background-color', '#' + this.value);
    });
    
    $('#color1').css('background-color', '#' + $('#color1').val());
    $('#color2').css('background-color', '#' + $('#color2').val());
    $('#color3').css('background-color', '#' + $('#color3').val());
    $('#color4').css('background-color', '#' + $('#color4').val());
    
    $('#bShow').click(function() {
        $('#fassade').attr("src", $('#imgPath').val() + 'c1=' + $('#color1').val()
                                  + '&c2=' + $('#color2').val()
                                  + '&c3=' + $('#color3').val()
                                  + '&c4=' + $('#color4').val());
    });
});