$(document).ready(function() {
    $('#bluebox').mouseover(function(e) {
        bindMouse($(this));
        expandBox($(this));
        contractBox($('#orangebox'));
        contractBox($('#greenbox'));
        contractBox($('#redbox'));
        $('#slides').attr('scrollLeft', 946);

    });
    $('#orangebox').mouseover(function(e) {
        bindMouse($(this));
        expandBox($(this));
        contractBox($('#bluebox'));
        contractBox($('#greenbox'));
        contractBox($('#redbox'));
        $('#slides').attr('scrollLeft', 1892);
    });
    $('#greenbox').mouseover(function(e) {
        bindMouse($(this));
        expandBox($(this));
        contractBox($('#bluebox'));
        contractBox($('#orangebox'));
        contractBox($('#redbox'));
        $('#slides').attr('scrollLeft', 2838);
    });
    $('#redbox').mouseover(function(e) {
        bindMouse($(this));
        expandBox($(this));
        contractBox($('#bluebox'));
        contractBox($('#orangebox'));
        contractBox($('#greenbox'));
        $('#slides').attr('scrollLeft', 3784);
    });
});

function bindMouse(obj) {
    $(document).unbind('mousemove');
    $(document).mousemove(function(e) {
        var sX = e.pageX - $('#slides').offset().left;
        var sY = e.pageY - $('#slides').offset().top;
        var bX = e.pageX - obj.offset().left;
        var bY = e.pageY - obj.offset().top;
        
        if ((bX >= 0 && bX <= 219 && bY >= 0 && bY <= 299) || (sX >= 0 && sX <= 947 && sY >= 0 && sY <= 235)) {
        } else {
            contractBox(obj);
            $('#slides').attr('scrollLeft', 0);
            $(document).unbind('mousemove');
        }
    });
}

function expandBox(obj) {
    $(obj).animate({ top: '136', height: '299' }, 25);
}

function contractBox(obj) {
    $(obj).animate({ top: '171', height: '229' }, 25);
}