Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth;
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,t) {
	   	element = $(element);
    	element.style.left = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src;
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href;
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll)
	return arrayPageScroll;
}

function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) {
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;
}

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

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id','vizuals_layout');
    objOverlay.style.display = 'none';
    objOverlay.onclick = function() { myVizuals_finish(); return false; }
    objBody.appendChild(objOverlay);

    var objOverlayFix = document.createElement("div");
    objOverlayFix.setAttribute('id','vizuals_layout_fix');
    objOverlayFix.style.display = 'block';
    objOverlay.appendChild(objOverlayFix);

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

    var objVizualsImage = document.createElement("img");
    objVizualsImage.setAttribute('id','vizuals_img');
    objVizualsImage.onclick = function() { myVizuals_finish(); return false; }
    objImageContainer.appendChild(objVizualsImage);

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

    var objVizualsLoading = document.createElement("img");
    objVizualsLoading.setAttribute('src','/@img/loader.gif');
    objVizualsLoading.onclick = function() { myVizuals_finish(); return false; }
    objLoadingContainer.appendChild(objVizualsLoading);
}

// Script
function myVizuals_begin(img, w, h, user) {
    var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

    Element.setHeight('vizuals_layout', arrayPageSize[1]);
    Element.setHeight('vizuals_layout_fix', arrayPageSize[1]);

    Element.setTop('vizuals_loading', arrayPageScroll[1] + (arrayPageSize[3] / 2.2));
    Element.setLeft('vizuals_loading', (arrayPageSize[0] - 35) / 2);

    imgPreloader = new Image();

	new Effect.Appear('vizuals_layout', { duration: 0.1, from: 0.0, to: 1.1,
	    afterFinish: function() {
            Element.show('vizuals_loading');

            imgPreloader.onload = function() {
                Element.hide('vizuals_loading');
                Element.setSrc('vizuals_img', imgPreloader.src);

                Element.setTop('vizuals_container', arrayPageScroll[1] + ((arrayPageSize[3] - h) / 2));
                Element.setLeft('vizuals_container', (arrayPageSize[0] - w) / 2);

                new Effect.Appear('vizuals_container', { duration: 0.5, from: 0.0, to: 1.0 });
            }

            imgPreloader.src = img;
	   }
	});

}

function myVizuals_finish() {
    Element.hide('vizuals_loading');
    new Effect.Fade('vizuals_container', {duration: 0.5,
        afterFinish: function() {
            new Effect.Fade('vizuals_layout', { duration: 0.1});
        }
    });

}