addLoadEvent(showStarBox);

var yTop = 0
var yBottom = 0;
var objBottomImageContainer;
var objBottomImageContainer;

var topInterval = -1;
var bottomInterval = -1;


function showStarBox() {
			var arrayPageSize = getPageSize();
			var arrayPageScroll = getPageScroll();


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

			var objOverlay = document.createElement("div");
			objOverlay.setAttribute('id','overlay');
			//objOverlay.style.display = 'none';
			objOverlay.style.height = arrayPageSize[1] +"px";
			objBody.appendChild(objOverlay);

			objTopImageContainer = document.createElement("div");
			objTopImageContainer.setAttribute('id','topImageContainer');
			objOverlay.appendChild(objTopImageContainer);

			var objImageTop = document.createElement("img");
			objImageTop.setAttribute('id','imageTop');
			//objImageTop.setAttribute('src','ReadySkins/lavespadue/images/ani_headBk.gif');
			objImageTop.setAttribute('src','ReadySkins/lavespadue/images/headBk.gif');
			objTopImageContainer.appendChild(objImageTop);

			/*
			var objImageTop = document.createElement("img");
			objImageTop.setAttribute('id','imageTopMenu');
			objImageTop.setAttribute('src','ReadySkins/lavespadue/images/menuBk.gif');
			objTopImageContainer.appendChild(objImageTop);
			*/


			objBottomImageContainer = document.createElement("div");
			objBottomImageContainer.setAttribute('id','bottomImageContainer');
			objOverlay.appendChild(objBottomImageContainer);
			
			var objImageBottom = document.createElement("img");
			objImageBottom.setAttribute('id','imageBottom');
			objImageBottom.setAttribute('src','ReadySkins/lavespadue/images/footBk.gif');
			objBottomImageContainer.appendChild(objImageBottom);



			var objEnter = document.createElement("div");
			objEnter.setAttribute('id','divEnter');			
			
			objEnter.innerHTML = "ENTRA"
			objBottomImageContainer.appendChild(objEnter);

			var objImageBottomText = document.createElement("img");
			objImageBottomText.setAttribute('id','imageBottomText');
			objImageBottomText.setAttribute('src','ReadySkins/lavespadue/images/startTextBanner.gif');
			objBottomImageContainer.appendChild(objImageBottomText);
			yTop = (arrayPageScroll[1] + (arrayPageSize[3] / 2) - 100); //200= altezza immagine completa
			yBottom = yTop + 213; //143;

			objTopImageContainer.style.top =  yTop + "px";
			objBottomImageContainer.style.top =  yBottom + "px";
			//topInterval = setInterval("moveUp()", 30);
			//bottomInterval = setInterval("moveDown()", 30);
			
			objOverlay.onclick = function() { startMotion(objOverlay, objEnter); }

}

function startMotion(objOverlay, objEnter) {
	document.getElementById('grandeVelo').style.display= '';	
	topInterval = setInterval("moveUp()", 30);
	bottomInterval = setInterval("moveDown()", 30);
	objOverlay.onclick = function() { objOverlay.style.display = 'none'; return false; }
	objEnter.style.display = 'none';
	setTimeout("opacity('overlay', 100, 0, 4000)",800);
	//opacity('overlay', 100, 0, 6000)
	
}
//
// getPageScroll()
// Returns array with x,y page scroll values.
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

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

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
//
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){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


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

// -----------------------------------------------------------------------------------



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 + ")";
    
    if(opacity == 0)
			document.getElementById(id).style.display='none';
} 


function moveUp() {
		yTop -= 5;
		if(yTop < 0) {
			yTop=0;
			clearInterval(topInterval)
			topInterval=0;
			//onEndMove()
		}
		objTopImageContainer.style.top =  yTop + "px";
}
function moveDown() {
		yBottom += 5;
		if(yBottom > (arrayPageSize[3] - 57)) {
			yBottom=(arrayPageSize[3] - 57);
			clearInterval(bottomInterval)
			bottomInterval=0
			//onEndMove()
		}
		objBottomImageContainer.style.top =  yBottom + "px";
}

function onEndMove() {
	if(topInterval==0 && bottomInterval == 0) {
		opacity('overlay', 100, 0, 1500)
	}
}



function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}