var fontPickerId = false;
var bgPickerId = false;
var justLoad = true;
var activeBoxId = 1;
var count = 1;

$(function(){
    // Modals Init
    $('#cssDialog').dialog({
    	autoOpen: false,
    	width: 800,
    	height: 375,
        resizable: false,
        modal: true,
        bgiframe: true,
    	buttons: {
    		"Copy to Clipboard": function() {
    			$(this).dialog("close");
    		},
    		"Cancel": function() {
    			$(this).dialog("close");
    		}
    	}
    });

    $('#htmlDialog').dialog({
    	autoOpen: false,
    	width: 800,
    	height: 375,
        resizable: false,
        modal: true,
        bgiframe: true,
    	buttons: {
    		"Copy to Clipboard": function() {
    			$(this).dialog("close");
    		},
    		"Cancel": function() {
    			$(this).dialog("close");
    		}
    	}
    });


    $('#editTextDialog').dialog({
    	autoOpen: false,
    	width: 800,
    	height: 375,
        resizable: false,
        modal: true,
        bgiframe: true,
    	buttons: {
    		"Save": function() {
    			writeTextSave('save');
                $(this).dialog("close");
    		},
            "Cancel": function() {
                $(this).dialog("close");
    		},
    		"Reset to default text": function() {
    			writeTextSave('reset');
                $(this).dialog("close");
    		}
    	}
    });


    // Font Color Picker
    $('#fontColorSelector').ColorPicker({
    	color: '#000000',
    	onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
            fontPickerId = $(colpkr).attr('id');
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(500);
    		return false;
    	},
    	onChange: function (hsb, hex, rgb) {
    		$('#fontColorSelector').css('backgroundColor', '#' + hex);
            $('#fontColorHex').text(hex);
            applyGlobalFontColor(hex);
    	},
        onSubmit: function(colpkr) {
		    $('#' + fontPickerId).fadeOut(500);
		}
    });


    // Background Color Picker
    $('#bgColorSelector').ColorPicker({
    	color: '#ffffff',
    	onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
            bgPickerId = $(colpkr).attr('id');
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(500);
    		return false;
    	},
    	onChange: function (hsb, hex, rgb) {
    		$('#bgColorSelector').css('backgroundColor', '#' + hex);
            $('#bgColorHex').text(hex);
            applyFontBG(hex);
    	},
        onSubmit: function(colpkr) {
		    $('#' + bgPickerId).fadeOut(500);
		}
    });


    // Field Color Picker
    $('#fieldWrap_1 .fieldColor').ColorPicker({
    	color: '#AD0000',
    	onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
            fontPickerId = $(colpkr).attr('id');
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(500);
    		return false;
    	},
    	onChange: function (hsb, hex, rgb, parent) {
            $(parent).css('backgroundColor', '#' + hex);
            applyFontColor(hex);
    	},
        onSubmit: function(colpkr) {
		    $('#' + fontPickerId).fadeOut(500);
		}
    });


    $('#fieldWrap_2 .fieldColor').ColorPicker({
    	color: '#000000',
    	onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
            fontPickerId = $(colpkr).attr('id');
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(500);
    		return false;
    	},
    	onChange: function (hsb, hex, rgb, parent) {
            $(parent).css('backgroundColor', '#' + hex);
            applyFontColor(hex);
    	},
        onSubmit: function(colpkr) {
		    $('#' + fontPickerId).fadeOut(500);
		}
    });


    // Sliders
    $("#columnPadding").slider({
			value:5,
			min: 0,
			max: 20,
			step: 1,
			slide: function(event, ui) {
				$("#columnPaddingVal").html(ui.value + 'px');
                applyColumnsPadding(ui.value);
			},
            change: function(event, ui) {
                setAdditionalStyles('columns-padding', ui.value)
            }
	});

    $(".fieldSlider").slider({
			value:946,
			min:20,
			max:968,
			step:1,
			slide: function(event, ui) {
                id = $(this).attr('id');
                id = id.replace("fieldSlider_", "");
                applyFieldWidth(id, ui.value);
			},
            change: function(event, ui) {}
	});


    // Mouseover / mouseout / click effects
    $(".fieldWrap").mouseover(function(){
        fieldMouseover(this);
    });

    $(".fieldWrap").mouseout(function(){
        fieldMouseout(this);
    });

    $(".fieldWrap").click(function(){
        fieldClick(this);
    });

    // document click
    $('.fieldWrap, .header, .dashboard, .colorpicker, .ui-dialog').bind("outerClick", function(){
        removeBorders();
    });

    apply_saved_params();
    justLoad = false;
});