image_suffix = '.png';
z_index = 1;


/**
 * Drag.js:
 * This function is designed to be called from a mousedown event handler.
 * It registers temporary capturing event handlers for the mousemove and 
 * mouseup events that will follow, and uses these handlers to "drag" the
 * specified document element.  The first argument must be an absolutely
 * positioned document element.  It may be the element that received the 
 * mousedown event or it may be some containing element.
 * The second argument must be the Event object for the mousedown event.
 **/
function beginDrag(elementToDrag, event) {
	elementToDrag.style.zIndex = z_index++;

    // Figure out where the element currently is.
    // The element must have left and top CSS properties in a style attribute.
    // Also, we assume they are set using pixel units.
    var x = parseInt(elementToDrag.style.left);
    var y = parseInt(elementToDrag.style.top);

    // Compute the distance between that point and the mouse click.
    // The nested moveHandler function below needs these values.
    var deltaX = event.clientX - x;
    var deltaY = event.clientY - y;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup events that follow this mousedown event.  Note that
    // these are registered as capturing event handlers on the document.
    // These event handlers remain active while the mouse button remains
    // pressed, and are removed when the button is released.
    document.addEventListener("mousemove", moveHandler, true);
    document.addEventListener("mouseup", upHandler, true);

    // We've handled this event.  Don't let anybody else see it.
    event.stopPropagation();
    event.preventDefault();

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged.  It is responsible for moving the element.
     **/
    function moveHandler(event) {
        // Move the element to the current mouse position, adjusted as
	// necessary by the offset of the initial mouse click.
	elementToDrag.style.left = (event.clientX - deltaX) + "px";
	elementToDrag.style.top = (event.clientY - deltaY) + "px";

	// And don't let anyone else see this event.
	event.stopPropagation();
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(event) {
	// Unregister the capturing event handlers
	document.removeEventListener("mouseup", upHandler, true);
	document.removeEventListener("mousemove", moveHandler, true);
	// And don't let the event propagate any further
	event.stopPropagation();
    }
}


var all_shapes = new Array(
	'shape_01',
	'shape_02',
	'shape_03',
	'shape_04',
	'shape_05',
	'shape_06',
	'shape_07',
	'shape_08',
	'shape_09',
	'shape_10',
	'shape_11',
	'shape_12',
	'shape_13',
	'shape_14',
	'shape_15',
	'shape_16',
	'shape_17',
	'shape_18',
	'shape_19',
	'shape_20',
	'shape_21',
	'shape_22',
	'shape_23',
	'shape_24',
	'shape_25',
	'shape_26',
	'shape_27',
	'shape_28',
	'shape_29',
	'shape_30',
	'shape_31',
	'shape_32',
	'shape_33',
	'shape_34',
	'shape_35'
);


function show_sandbox()
{
	document.getElementById('ok_to_drag').style.display = 'inline';

	sandbox_obj = document.getElementById('mosaic_sandbox');
	sandbox_obj.style.display = 'block';

	for(i = 0; i < all_shapes.length; i++)
		{
		img_obj = document.createElement('img');
		img_obj.src = 'shapes/' + all_shapes[i] + image_suffix;
		img_obj.id = all_shapes[i];
		img_obj.addEventListener('mousedown', function(e) { beginDrag(e.currentTarget, e); }, false);
		img_obj.style.position = 'absolute';
		img_obj.style.top = '' + Math.round(Math.random() * 500) + 'px';
		img_obj.style.left = '' + Math.round(Math.random() * 500) + 'px';

		sandbox_obj.appendChild(img_obj);
		}
}


function show_static()
{
	document.getElementById('no_mouse_events').style.display = 'block';

	mosaic_static_obj = document.getElementById('mosaic_static');
	mosaic_static_obj.style.display = 'block';

	mosaic_static_obj.appendChild(document.createElement('hr'));

	shuffle_array(all_shapes);

	mosaic_counter = 1;
	while(all_shapes.length > 0)
		{
		shape_name = all_shapes.shift();

		img_obj = document.createElement('img');
		img_obj.src = 'shapes/' + shape_name + image_suffix;

		mosaic_static_obj.appendChild(img_obj);

		if(mosaic_counter++ % 5 == 0)
			mosaic_static_obj.appendChild(document.createElement('br'));
		}

	mosaic_static_obj.appendChild(document.createElement('hr'));
}


function mosaic_set_image_type(desired_suffix)
{
	image_suffix = desired_suffix;

	for(i = 0; i < document.images.length; i++)
		{
		image_src = document.images[i].src;

		image_src = image_src.replace(/((message|shapes)\/.*?)\.(png|gif)/, '$1' + desired_suffix);

		document.images[i].src = image_src;
		}
}


function mosaic_change_image_format(select_obj)
{
	mosaic_set_image_type(select_obj.options[select_obj.selectedIndex].value);
}


function mosaic_init()
{
	if(navigator.appName == 'Microsoft Internet Explorer')
//		document.getElementById('offer_gifs').style.display = 'block';
		mosaic_set_image_type('.gif');

	if(document.implementation.hasFeature('MouseEvents', '2.0'))
		show_sandbox();
	else
		show_static();

}