function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 


function loadingInit() {
	var objBody = document.getElementsByTagName("body").item(0);

	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.style.display = 'none';
	objBody.appendChild(objOverlay);

	var objLoading = document.createElement("div");
	objLoading.setAttribute('id','loading');
	objLoading.style.display = 'none';
	objBody.appendChild(objLoading);

	var objLoadingImage = document.createElement("img");
	objLoadingImage.setAttribute('id','loadingImg');
	objLoadingImage.setAttribute('src','../images/components/loading_images.gif');
	objLoading.appendChild(objLoadingImage);

	var objMessage = document.createElement("h1");
	objMessage.setAttribute('id','loadingMessage');
	objLoading.appendChild(objMessage);




}


function hideLoading() {
	$('overlay').style.display = 'none'; 
	$('loading').style.display = 'none';
	document.body.style.overflow = 'auto';
}

function showLoading () {
	document.body.style.overflow = 'hidden';
    $('overlay').style.opacity = (0);
    $('overlay').style.MozOpacity = (0);
    $('overlay').style.KhtmlOpacity = (0);
    $('overlay').style.filter = "alpha(opacity=" + 0 + ")";

	$('overlay').style.display = 'block';
	$('loading').style.display = 'block';
	opacity('overlay',0,50,200);

}

function uploadImages() {
	if ($('uploadImagesBtn')) {
		$('uploadImagesBtn').onclick = function() {
			showLoading();
			$('loadingMessage').innerHTML = "Uploading images! Please wait ...";
		};				
	}

}

//INIT
Event.observe(window, 'load', loadingInit);
Event.observe(window, 'load', uploadImages);