$(document).ready(function() {
	// give all the box to be draggable
    var children = $("#containercoll").children();
    var child = $("#containercoll div:first-child");

    for (i=0; i<children.length; i++) {
        $("#"+child.attr("id")).draggable({ 
            containment: "#containercoll", scroll: false 
        });
        child = child.next();
    }

	// set for custom right click menu
	var clickedId;
	/*
    $(".box").bind("contextmenu",function(e){
        $("#mymenu").animate({
            top: e.pageY,
            left: e.pageX
            }, 'fast', function() {
        }).show();

        clickedId = $(this).attr("id");
        $(".box").css("background", "#fff");
        $("#"+clickedId).css("background", "#666");

        return false;
    });
    */
    // action on bring to front or backward
    var maxZindex = 1;
    var minZindex = 1;
/*
    $("#btfront").click(function() {
        maxZindex++;
        $("#"+clickedId).css("z-index", ""+maxZindex);
        return false;
    });

    $("#btback").click(function() {
        minZindex--;
        $("#"+clickedId).css("z-index", ""+minZindex);
        return false;
    });
*/
	// reset style of box and menu
  /*  $("body, #containercoll, .box, #btback, #btfront, #btscamble").click(function() {
        $("#mymenu").hide();
        $(".box").css("background", "#fff");
    });
    */
    // reset button action, reset style and current max, min z-index
    /*
	$("#btreset").click(function() {
		$(".box").removeAttr("style");
		$(".box").css("position", "relative");
		maxZindex = 1;
		minZindex = 1;
		return false;
	});
	*/
});

/* this function from:
 * http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
 */
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#containercoll').children();
    var child = $('#containercoll div:first-child');
    for (i=0; i<children.length; i++) {
        $("#"+child.attr('id')).css("position", "absolute");
        moveRandom(child.attr('id'));
        child = child.next();
    }
}

function moveRandom(id) {
    /* get container position and size
     * -- access method : cPos.top and cPos.left */
    var cPos = $('#containercoll').offset();
    var cHeight = $('#containercoll').height();
    var cWidth = $('#containercoll').width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#containercoll').css('padding-top').replace('px', ''));
	var pad = 5;

    // get movable box size
    var bHeight = $('#'+id).height();
    var bWidth = $('#'+id).width();

    // set maximum position
    maxY = cPos.top + cHeight - bHeight - pad;
    maxX = cPos.left + cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position			
    newY = randomFromTo(60, 300);
    newX = randomFromTo(0, 500);

    $('#'+id).animate({
        top: newY,
        left: newX
        }, 'slow', function() {
    });
}