$().ready(function(){
    var defaultVal = "Hello, my name is Cheyuz. Welcome to Cheyuz's CSS Generator. This is your example content. Edit this content in the textarea on the left.";
    $('.sidebar').jScrollPane();
    $('#generalClassName').focus();
    $('#previewCSSForm').submit(function(e){
        e.preventDefault();
        $('#classCSS').val($('#generalClassName').val());
        $('#previewCSS').val($('#object').attr('style'));
        if ($('#previewCSS').val() != '') {
            $(this).nyroModal().nmCall();
        } else {
            alert("Anda belum mengubah apapun.");
        }
    });
    $('.nyroModal').nyroModal({
        'width': '200'
    });
    
    $('#object').html(defaultVal);
    $('#generalTextForPreview').val(defaultVal);
    $("#fontColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#fontColorPicker').css("background-color", "#" + val);
            $('#fontColor').val('#'+val);
            $('#object').css($('#fontColor').attr('name'), $('#fontColor').val());
        }
    });
    $("#backgroundColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#backgroundColorPicker').css("background-color", "#" + val);
            $('#backgroundColor').val('#'+val);
            $('#object').css($('#backgroundColor').attr('name'), $('#backgroundColor').val());
        }
    });
    $("#borderTopColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#borderTopColorPicker').css("background-color", "#" + val);
            $('#borderTopColor').val('#'+val);
            $('#object').css($('#borderTopColor').attr('name'), $('#borderTopColor').val());
        }
    });
    $("#borderRightColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#borderRightColorPicker').css("background-color", "#" + val);
            $('#borderRightColor').val('#'+val);
            $('#object').css($('#borderRightColor').attr('name'), $('#borderRightColor').val());
        }
    });
    $("#borderBottomColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#borderBottomColorPicker').css("background-color", "#" + val);
            $('#borderBottomColor').val('#'+val);
            $('#object').css($('#borderBottomColor').attr('name'), $('#borderBottomColor').val());
        }
    });
    $("#borderLeftColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#borderLeftColorPicker').css("background-color", "#" + val);
            $('#borderLeftColor').val('#'+val);
            $('#object').css($('#borderLeftColor').attr('name'), $('#borderLeftColor').val());
        }
    });
    $("#borderColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#borderColorPicker').css("background-color", "#" + val);
            $('#borderColor').val('#'+val);
            $('#object').css($('#borderColor').attr('name'), $('#borderColor').val());
        }
    });
    $("#boxShadowColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#boxShadowColorPicker').css("background-color", "#" + val);
            $('#boxShadowColor').val('#'+val);
            setBoxShadow();
        }
    });
    $("#textShadowColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#textShadowColorPicker').css("background-color", "#" + val);
            $('#textShadowColor').val('#'+val);
            setTextShadow();
        }
    });
    $("#outlineColorPicker").mlColorPicker({
        'onChange': function(val){
            $('#outlineColorPicker').css("background-color", "#" + val);
            $('#outlineColor').val('#'+val);
            setOutline();
        }
    });
    $('#generalTextForPreview').keyup(function(){
        $('#object').html($(this).val());
    });
    $('#backgroundImageURL').click(function(){
        if(($(this)).val() == '')
            $(this).val('http://');
    });
    $('#borderRadiusTopLeft').keyup(function(){
        var b = $(this).val()+'px';
        $('#object').css({
            "-webkit-border-top-left-radius":b,
            "-moz-border-radius-topleft":b,
            "border-top-left-radius":b
        });
    });
    $('#borderRadiusTopRight').keyup(function(){
        var b = $(this).val()+'px';
        $('#object').css({
            "-webkit-border-top-right-radius":b,
            "-moz-border-radius-topright":b,
            "border-top-right-radius":b
        });
    });
    $('#borderRadiusBottomRight').keyup(function(){
        var b = $(this).val()+'px';
        $('#object').css({
            "-webkit-border-bottom-right-radius":b,
            "-moz-border-radius-bottomright":b,
            "border-bottom-right-radius":b
        });
    });
    $('#borderRadiusBottomLeft').keyup(function(){
        var b = $(this).val()+'px';
        $('#object').css({
            "-webkit-border-bottom-left-radius":b,
            "-moz-border-radius-bottomleft":b,
            "border-bottom-left-radius":b
        });
    });
    $('#boxShadowInset').change(setBoxShadow);
    $('#boxShadowHorizontalLength').keyup(setBoxShadow);
    $('#boxShadowVerticalLength').keyup(setBoxShadow);
    $('#boxShadowBlurRadius').keyup(setBoxShadow);
    $('#boxShadowSpread').keyup(setBoxShadow);
                
    $('#textShadowHorizontalLength').keyup(setTextShadow);
    $('#textShadowVerticalLength').keyup(setTextShadow);
    $('#textShadowBlurRadius').keyup(setTextShadow);
                
    $('#RGBAred').keyup(setRGBA);
    $('#RGBAgreen').keyup(setRGBA);
    $('#RGBAblue').keyup(setRGBA);
    $('#RGBAopacity').keyup(setRGBA);
                
    $('#multipleColumnOfColumns').keyup(setColumns);
    $('#multipleColumnColumnGap').keyup(setColumnGap);
                
    $('#BoxSizingSizing').change(function(){
        $("#object").css({
            "-moz-box-sizing":$(this).val(),
            "-webkit-box-sizing":$(this).val(),
            "-box-sizing":$(this).val(),
            "-khtml-box-sizing":$(this).val()
        });
    });
                
    $("#outlineThicker").keyup(setOutline);
    $("#outlineStyle").keyup(setOutline);
                
    $('#transitionProperty').change(setTransition);
    $('#transitionDuration').keyup(setTransition);
    $('#transitionDurationType').change(setTransition);
    $('#transitionFunction').change(setTransition);
                
    $('#transformScale').keyup(setTransform);
    $('#transformRotate').keyup(setTransform);
    $('#transformTranslateX').keyup(setTransform);
    $('#transformTranslateY').keyup(setTransform);
    $('#transformSkewX').keyup(setTransform);
    $('#transformSkewY').keyup(setTransform);
                
});
            
var setTransform = function(){
    var b="scale("+$("#transformScale").val()+") ";
    var f="rotate("+$("#transformRotate").val()+"deg) ";
    var h="translate("+$("#transformTranslateX").val()+"px, ";
    var d=$("#transformTranslateY").val()+"px) ";
    var g="skew("+$("#transformSkewX").val()+"deg, ";
    var c=$("#transformSkewY").val()+"deg)";
    var e=b+f+h+d+g+c;
    $("#object").css({
        "-webkit-transform":e,
        "-moz-transform":e,
        "-o-transform":e,
        "-ms-transform":e,
        transform:e
    })
};         
var setTransition = function(){
    var d=$("#transitionProperty").val()+" ";
    var c=$("#transitionDuration").val();
    var e=$("#transitionDurationType").val()+" ";
    var b=$("#transitionFunction").val();
    var f=d+c+e+b;
    $("#object").css({
        "-webkit-transition":f,
        "-moz-transition":f,
        "-o-transition":f,
        transition:f
    });
};
var setOutline = function(){
    var e=$("#outlineThicker").val()+"px ";
    var b=$("#outlineStyle").val()+" ";
    var c=$("#outlineColor").val();
    var d=e+b+c;
    $("#object").css("outline",d);
};
var setColumns = function(){
    var b=$("#multipleColumnOfColumns").val();
    $("#object").css({
        "-moz-column-count":b,
        "-webkit-column-count":b,
        "column-count":b
    });
};
var setColumnGap = function(){
    var b=$("#multipleColumnColumnGap").val()+"px";
    $("#object").css({
        "-moz-column-gap":b,
        "-webkit-column-gap":b,
        "column-gap":b
    });
};
var setRGBA = function(){
    var d=$("#RGBAred").val()+", ";
    var c=$("#RGBAgreen").val()+", ";
    var e=$("#RGBAblue").val()+", ";
    var b=$("#RGBAopacity").val();
    var f=d+c+e+b;
    $("#object").css("background","rgba("+f+")");
};
var setTextShadow = function(){
    var b=$("#textShadowHorizontalLength").val()+"px ";
    var e=$("#textShadowVerticalLength").val()+"px ";
    var c=$("#textShadowBlurRadius").val()+"px ";
    var d=$("#textShadowColor").val();
    var f=b+e+c+d;
    $("#object").css("text-shadow",f);
};
var setBoxShadow = function(){
    var g=$("#boxShadowInset").val()+" ";
    var d=$("#boxShadowHorizontalLength").val()+"px ";
    var h=$("#boxShadowVerticalLength").val()+"px ";
    var k=$("#boxShadowBlurRadius").val()+"px ";
    var b=$("#boxShadowSpread").val()+"px ";
    var c=$("#boxShadowColor").val();
    var e=g+d+h+k+b+c;
    $("#object").css({
        "-webkit-box-shadow":e,
        "-moz-box-shadow":e,
        "box-shadow":e
    });
};

function setCSS(e){
    $('#object').css(e.name, e.value);
};
function setCSSpx(e){
    $('#object').css(e.name, e.value+'px');
};
function setCSSurl(e){
    $('#object').css(e.name, "url('"+e.value+"')");
};