var myScreenWidth=0;
var myScreenHeight=0;
var myUsefulWidth=0;
var myUsefulHeight=0;
var myLeftSpace = 50;
var myTopSpace = 10;

Event.observe(window,'load',startPG);


function startPG(){

	//img
	var myElements = document.getElementsByClassName('Box');
	if (myElements.length > 0){
		for (i=0; i < myElements.length; i++) {
			Event.observe(myElements[i], 'mouseover' , boxImgSkills.enter.bindAsEventListener(boxImgSkills, myElements[i]));
			Event.observe(myElements[i], 'mouseout' , boxImgSkills.exit.bindAsEventListener(boxImgSkills, myElements[i]));
		}
	}
/*
	//Text portfolio
	var myElements = document.getElementsByClassName('BoxOrange');
	if (myElements.length > 0){
		for (i=0; i < myElements.length; i++) {
			Event.observe(myElements[i], 'mouseover' , boxTextSkills.enter.bindAsEventListener(boxTextSkills, myElements[i]));
			Event.observe(myElements[i], 'mouseout' , boxTextSkills.exit.bindAsEventListener(boxTextSkills, myElements[i]));
		}
	}
*/
	//Text clienti
	var myElements = document.getElementsByClassName('BoxOrange1');
	if (myElements.length > 0){
		for (i=0; i < myElements.length; i++) {
			Event.observe(myElements[i], 'mouseover' , boxTextSkillsCliente.enter.bindAsEventListener(boxTextSkills, myElements[i]));
			Event.observe(myElements[i], 'mouseout' , boxTextSkillsCliente.exit.bindAsEventListener(boxTextSkills, myElements[i]));
		}
	}
	
	//Logo
	var myElements = document.getElementsByClassName('boxLogo');
	if (myElements.length > 0){
		for (i=0; i < myElements.length; i++) {
			Event.observe(myElements[i], 'mouseover' , boxLogoSkills.enter.bindAsEventListener(boxLogoSkills, myElements[i]));
			Event.observe(myElements[i], 'mouseout' , boxLogoSkills.exit.bindAsEventListener(boxLogoSkills, myElements[i]));
		}
	}
	
	//Mail
	var myElements = document.getElementsByClassName('boxMail');
	if (myElements.length > 0){
		for (i=0; i < myElements.length; i++) {
			Event.observe(myElements[i], 'mouseover' , boxMailSkills.enter.bindAsEventListener(boxMailSkills, myElements[i]));
			Event.observe(myElements[i], 'mouseout' , boxMailSkills.exit.bindAsEventListener(boxMailSkills, myElements[i]));
		}
	}

	centerPG();
	Event.observe(window,'resize',centerPG);
}

var boxImgSkills = {
	enter: function(event, myElement){
				var elemento = Event.findElement(event,'img');
				if (elemento){
					elemento.src = '/st176/images/box_orange.png'
					new Effect.Parallel(
					     [
						     new Effect.Opacity(myElement.previous('div.boxImg'), {from:0, to:1,  sync: true }),
						     new Effect.Highlight(myElement.previous('div.boxImg'), {startcolor: "#ffffff", endcolor: "#ffffff", sync: true })
					     ],
						     {duration: 0.2}
					);
				}
				
			},
			
			
	exit: function(event, myElement){
				var elemento = Event.findElement(event,'img');
				if (elemento){
					elemento.src = '/st176/images/borderblu.png'
				}
			}
}


var boxTextSkills = {
	enter: function(event, myElement){
				if (myElement.previous('div.boxImg')){
					myElement.previous('div.boxImg').removeClassName('white');
					myElement.previous('div.boxImg').addClassName('bgOrange');
				}
			},
			
			
	exit: function(event, myElement){
				if (myElement.previous('div.boxImg')){
					myElement.previous('div.boxImg').addClassName('white');
					myElement.previous('div.boxImg').removeClassName('bgOrange');
				}
			}
}


var boxLogoSkills = {
	enter: function(event,myElement){
					myElement.removeClassName('boxLogo');
					myElement.addClassName('boxLogo-OVER');
			},
			
			
	exit: function(event,myElement){
					myElement.removeClassName('boxLogo-OVER');
					myElement.addClassName('boxLogo');
			}
}

var boxMailSkills = {
	enter: function(event,myElement){
					myElement.removeClassName('boxMail');
					myElement.addClassName('boxMail-OVER');
			},
			
			
	exit: function(event,myElement){
					myElement.removeClassName('boxMail-OVER');
					myElement.addClassName('boxMail');
			}
}


var boxTextSkillsCliente = {
	enter: function(event, myElement){
				//alert(myElement.previous('div.boxImg'));
				if (myElement.previous('div.boxImg')){
					myElement.previous('div.boxImg').removeClassName('white1');
					myElement.previous('div.boxImg').addClassName('bgOrange1');
				}
			},
			
			
	exit: function(event, myElement){
				if (myElement.previous('div.boxImg')){
					myElement.previous('div.boxImg').addClassName('white1');
					myElement.previous('div.boxImg').removeClassName('bgOrange1');

				}
			}
}


function centerPG(){

	myScreenWidth = tellMeTheWidth();
	myScreenHeight = tellMeTheHeight();
	myUsefulHeight = myScreenHeight;
	myUsefulWidth = myScreenWidth - Math.round((myScreenWidth/100));
	
	var myContent = document.getElementById('frame');
	if (!myContent){
		return;
	}

	myLeftSpace = Math.max(Math.round((myScreenWidth - myContent.offsetWidth)/2),10);
	myTopSpace = Math.max(Math.round((myUsefulHeight - myContent.offsetHeight)/2),10);

	/*myContent.setStyle({
		margin: myTopSpace + 'px ' + myLeftSpace + 'px ' + myTopSpace + 'px ' + myLeftSpace + 'px '
	});	*/
	
	myContent.style.margin = myTopSpace + 'px 0 0 '  + myLeftSpace + 'px';
	document.getElementById('hideFrame').style.display = 'none';
}

function tellMeUsefulSpace(){
	myScreenWidth = tellMeTheWidth();
	myScreenHeight = tellMeTheHeight();
	myUsefulHeight = myScreenHeight;
	myUsefulWidth = myScreenWidth - Math.round((myScreenWidth/100));
}

//HEIGHT WINDOW
function tellMeTheHeight() {
        w = window;
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return height;
}

//WIDTH WINDOW
function tellMeTheWidth() {
        w = window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        return width;
}