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:
            <input type="text" name="arrow_size" id="arrow_size" 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: white;
                display:block;
                margin-left: 150px;
                position: relative;
            }
            #arrow_div:before, #arrow_div:after {
                content:" ";
                border: solid transparent;
                margin: 0px;
                padding: 0px;
                position: absolute;
                bottom: 100%;
                pointer-events: none;
            }
           ...

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;
    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: 200px;
    height:150px;
    background-color: white;
    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_after = $("#arrow_size").val();
    var arrow_before = parseInt(border_size) + parseInt(arrow_after) + parseInt(arrow_after % 2) + Math.floor(arrow_after / 2) - 1;
    var arrow_margin = $("#red").slider("value");
    if (side_value == "top") {
        margin_val = 'border-bottom-color: #FFFFFF;\n';
        margin_val = margin_val + 'bottom: 100%;\n';
        margin_val = margin_val + 'left: ' + arrow_margin + '%;\n';
        margin_val = margin_val + 'margin-left: -' + arrow_after + 'px;\n';
        margin_val = margin_val + 'border-width:' + arrow_after + 'px;\n';
        margin_before_val = 'border-bottom-color: #2CDF7B;\n';
        margin_before_val = margin_before_val + 'bottom: 100%;\n';
        margin_before_val = margin_before_val + 'left: ' + arrow_margin + '%;\n';
        margin_before_val = margin_before_val + 'margin-left: -' + arrow_before + 'px;\n';
        margin_before_val = margin_before_val + 'border-width:' + arrow_before + 'px;\n';
    }
    if (side_value == "bottom") {
        margin_val = 'border-top-color: #FFFFFF;\n';
        margin_val = margin_val + '\ntop: 100%;\n';
        margin_val = margin_val + '\nleft: ' + arrow_margin + '%;\n';
        margin_val = margin_val + '\nmargin-left: -' + arrow_after + 'px;\n';
        margin_val = margin_val + '\nborder-width:' +...