Borders-changing

by Vladimir

HTML

<span id="all" class="active">all</span>
<span id="top">top</span>
<span id="left">left</span>
<span id="bottom">bottom</span>
<span id="right">right</span>
<div id="d"><input type="text" id="w" /></div>

CSS

span {
    cursor: pointer;
    padding: 5px;
    margin: 0 0 0 10px;
}
span.active {
    background: #888;
}
div {
    border-style: solid;
    border-color: #F00;
    border-width:0;
    margin: 20px;
}

JavaScript

var b = {
    current: 'all',
    top:0,
    left:0,
    right:0,
    bottom: 0
}
$('span').click(function() {
    if(!$(this).hasClass('active')) {
       var s = this.id;
        if(s == 'all') {
            if(b.top == b.left && b.top == b.right && b.top == b.bottom) {
                 $('#w').val(b.top);   
            } else {
                 $('#w').val('');   
            }
        } else {
            $('#w').val(b[s]);
        }
        b.current = s;
        $('span').removeClass('active');
        $(this).addClass('active');
    }
});

$('#w').keyup(ch);
$('#w').change(ch);
function ch() {
    var w = $('#w').val();
    //alert(w);
    if(b.current == 'all') {
        $('#d').css({'border-width': w+'px'});
        b.top = b.left = b.right = b.bottom = w;
        console.log(b);
    } else {
        var prop = 'border-'+b.current+'-width';
        $('div').css(prop, w+'px');
        b[b.current] = w;
    }
}