Arrow generator

This is a simple arrow generator.

by Avdhut Sonpethkar

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="test">
    <div id="radio_container">
        <div id="input_caption">Arrow Size:
           </div>
        <div id="input_caption">Top:
            <input type="text" name="arrow_top" id="arrow_top" size="2" value="10" />px &nbsp; Right:
            <input type="text" name="arrow_right" id="arrow_right" size="2" value="10" />px&nbsp; Bottom:
            <input type="text" name="arrow_bottom" id="arrow_bottom" size="2" value="10" />px&nbsp; Left:
            <input type="text" name="arrow_left" id="arrow_left" size="2" value="10" />px</div>
         
        <div id="input_caption">Border Size:
            <input type="text" name="border_size" id="border_size" size="2" value="10" />px</div>
        <div id="input_caption">Arrow Side</div>
        <div id="input_radio">
            <input type="radio" value="top" name="arrow_side" checked="checked" />Top</div>
        <div id="input_radio">
            <input type="radio" value="right" name="arrow_side" />Right</div>
        <div id="input_radio">
            <input type="radio" value="bottom" name="arrow_side" />Bottom</div>
        <div id="input_radio">
            <input type="radio" value="left" name="arrow_side" />Left</div>
        <div id="red"></div>
    </div>
    <br style="line-height: 150px;" />
    <div id="arrow_container">
        <div id="arrow_div">This sample for Arrow</div>
        <style type="text/css">
            #arrow_div {
                font:italic bold 12px/30px Georgia, serif;
                border: 2px solid #2CDF7B;
                box-shadow: 0 0 9px black;
                -moz-box-shadow: 0 0 9px black;
                -webkit-box-shadow: 0 0 9px black;
                width: 100px;
                height: 100px;
                background-color: #2CDF7B;
                display:block;
               ...

CSS

#radio_container {
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
    background-color: #FFFFFF;
    display: block;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid;
    box-shadow: 0 0 9px black;
    -moz-box-shadow: 0 0 9px black;
    -webkit-box-shadow: 0 0 9px black;
    position: relative;
}
#radio_container #input_caption {
    display: block;
    padding: 5px;
    text-decoration: underline;
}
#radio_container #input_radio {
    display: inline;
    padding-right: 5px;
}
#arrow_div {
    font:italic bold 12px/30px Georgia, serif;
     box-shadow: 0 0 9px black;
    -moz-box-shadow: 0 0 9px black;
    -webkit-box-shadow: 0 0 9px black;
    width: 200px;
    height:150px;
    background-color: #2CDF7B;
    display:block;
    margin-left: 150px;
    position: relative;
}
#arrow_container {
    font:italic bold 12px Georgia, serif;
    border: 2px solid #FFFFFF;
    width: 100%;
    line-height: 15px;
    height: 200px;
    margin: 5px;
    float: left;
    background-color: white;
    display:block;
    position: relative;
}
#arrow_style {
    font:italic bold 12px Georgia, serif;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 9px black;
    -moz-box-shadow: 0 0 9px black;
    -webkit-box-shadow: 0 0 9px black;
    width: auto;
    line-height: 15px;
    height: auto;
    background-color: white;
    display:block;
    float: left;
    position: relative;
}
#input_caption a
{
    font:italic bold 18px/30px Georgia, serif;
    text-decoration: none;
}

#red {
    float: left;
    clear: left;
    width: 300px;
    margin: 15px;
}
#red .ui-slider-range {
    background: #ef2929;
}

#red .ui-slider-handle {
    border-color: #ef2929;
}

JavaScript

jQuery(document).ready(function () {
    $("#red").slider({
        orientation: "horizontal",
        range: "min",
        max: 100,
        value: 20,
        slide: update_arrow

    });

    $("#arrow_size").focusout(function () {
        update_arrow();
    });

    
    $("#border_size").focusout(function () {
        update_arrow();
    });
    $("input[name='arrow_side']").change(function (e) {
        update_arrow();
    });
    update_arrow();
    
});

function update_arrow() {

    var border_size = $("#border_size").val();
    var side_value = $("input[name='arrow_side']:checked").val();
    var margin_val = "",
        margin_before_val = "";
    var arrow_left = $("#arrow_left").val();
        var arrow_before_left = parseInt(border_size) + parseInt(arrow_left) + parseInt(arrow_left % 2) + Math.floor(arrow_left / 2) - 1;
    
    var arrow_right = $("#arrow_right").val();
     var arrow_before_right = parseInt(border_size) + parseInt(arrow_right) + parseInt(arrow_right % 2) + Math.floor(arrow_right / 2) - 1;
    
    
    var arrow_top = $("#arrow_top").val();
        var arrow_before_top = parseInt(border_size) + parseInt(arrow_top) + parseInt(arrow_top % 2) + Math.floor(arrow_top / 2) - 1;
    var arrow_bottom = $("#arrow_bottom").val();
           var arrow_before_bottom = parseInt(border_size) + parseInt(arrow_bottom) + parseInt(arrow_bottom % 2) + Math.floor(arrow_bottom / 2) - 1;
    
    var arrow_after = arrow_top+"px "+arrow_right+"px "+arrow_bottom+"px "+arrow_left+"px ";
    var arrow_before = arrow_before_top+"px "+arrow_before_right+"px "+arrow_before_bottom+"px "+arrow_before_left+"px ";
    var arrow_margin = $("#red").slider("value");
    var arrow_before_margin =  parseInt(border_size) + parseInt(arrow_margin) + parseInt(arrow_margin % 2) + Math.floor(arrow_margin / 2) -10;
    
    if (side_value == "top") {
        margin_val = 'border-bottom-color: #2CDF7B;\n';
        margin_val = margin_val + 'bottom: 100%;\n';
       ...