var test=0;
var margin=0; 

var resizeTimeout;
var sizeTimeout;
var currentsize = 2000; //x-ul containerului care trebuie centrat
var currentframe = 1;
var maxframes = 4;

//content declaration

var homePage = new Element('div',{
	'class': 'main',
	styles: {
	background: '#ffffff url(\'pic/middle-home1.jpg\') no-repeat top center'
}
});

var whatPage = new Element('div',{
	'class': 'main',
	styles: {
	background: '#ffffff url(\'pic/test.jpg\') no-repeat top center'
}
});

var portoPage = new Element('div',{
	'class': 'main',
	styles: {
	background: '#ffffff url(\'pic/middle-portofoliu.jpg\') no-repeat top center'
}
});

var contactPage = new Element('div',{
	'class': 'main',
	styles: {
	background: '#ffffff url(\'pic/middle-contact.jpg\') no-repeat top center'
}
});

var homeBox = new Element('div',{
	'class': 'box'
});
var homeTransparency = new Element('div',{
	'class': 'transparency'
});
var homeContent = new Element('div',{
	'class': 'content'
});


var whatBox = new Element('div',{
	'class': 'box',
	styles: {
		left: '2650px'
	}
});
var whatTransparency = new Element('div',{
	'class': 'transparency'
});
var whatContent = new Element('div',{
	'class': 'content',
	styles: {
		padding: '0px'
	}
});


var portoBox = new Element('div',{
	'class': 'box',
	styles: {
		left: '4650px'
	}
});
var portoTransparency = new Element('div',{
	'class': 'transparency'
});
var portoContent = new Element('div',{
	'class': 'content',
	styles: {
		padding: '0px'
	}
});


var contactBox = new Element('div',{
	'class': 'box',
	styles: {
		left: '6650px'
	}
});
var contactTransparency = new Element('div',{
	'class': 'transparency'
});
var contactContent = new Element('div',{
	'class': 'content'
});


//eo content declaration


window.addEvent('domready', function(){
	homePage.inject($('container'));
	whatPage.inject($('container'));
	portoPage.inject($('container'));
	contactPage.inject($('container'));

	homeBox.inject(homePage);
	homeTransparency.inject(homeBox);
	homeContent.inject(homeBox);
	homeContent.set('html', '<img src="pic/ent-2001-or8.png"><h1>pentru ca imaginea<br />ta conteaza</h1><br /><br /><p>o lume intreaga vrea sa te cunoasca</p>');
	
	whatBox.inject(whatPage);
	whatTransparency.set('opacity', 1);
	whatTransparency.inject(whatBox);
	whatContent.inject(whatBox);
	var wc = '<div style="width: 345px; float: left; margin-left: 3px; margin-top: 100px;"><img src="pic/webdesign.jpg" alt="Webdesign" style="float: right;"><div style="width: 230px; height: 100px; border: 1px solid #ffffff; display: block; overflow: hidden; float: left; text-align: right;"><span style="font-size: 0.6em;"><br /></span><span style="font-size: 14pt;">Webdesign</span><br /><span style="font-size: 8pt;">Modelam vise si le publicam pe net.<br />Cu sau fara materialul clientului.</span></div></div>';
	wc += '<div style="width: 345px; float: right; margin-right: 10px; margin-top: 100px;"><img src="pic/consultanta.jpg" alt="Consultanta" style="float: left;"><div style="width: 230px; height: 100px; border: 1px solid #ffffff; display: block; overflow: hidden; float: right;"><span style="font-size: 0.6em;"><br /></span><span style="font-size: 14pt;">Consultanta</span><br /><span style="font-size: 8pt;">In prima intersectie virati la dreapta.<br />Cealalta dreapta.</span></div></div>';
	wc += '<div style="width: 345px; float: left; margin-left: 3px; margin-top: 5px;"><img src="pic/mentenanta.jpg" alt="Mentenanta" style="float: right;"><div style="width: 230px; height: 100px; border: 1px solid #ffffff; display: block; overflow: hidden; float: left; text-align: right;"><span style="font-size: 0.6em;"><br /></span><span style="font-size: 14pt;">Mentenanta</span><br /><span style="font-size: 8pt;">Convingem site-ul tau sa functioneze.<br />Acum.</span></div></div>';
	wc += '<div style="width: 345px; float: right; margin-right: 10px; margin-top: 5px;"><img src="pic/strategie.jpg" alt="Strategie" style="float: left;"><div style="width: 230px; height: 100px; border: 1px solid #ffffff; display: block; overflow: hidden; float: right;"><span style="font-size: 0.6em;"><br /></span><span style="font-size: 14pt;">Strategie online</span><br /><span style="font-size: 8pt;">Suna bine. Arata bine.<br />Pana il faci nu o sa mai fie la moda.</span></div></div>';
	whatContent.set('html', wc);
	
	portoBox.inject(portoPage);
	portoTransparency.set('opacity', 0.9);
	portoTransparency.inject(portoBox);
	portoContent.inject(portoBox);
	var pc = '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://www.entity.ro" target="_blank"><img src="pic/porto/entity.jpg" alt="www.entity.ro" style="border: 2px solid #aaaaaa;"><br />Entity Consulting</a></div>';
	pc += '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://www.nineoclock.ro" target="_blank"><img src="pic/porto/nine.jpg" alt="www.nineoclock.ro" style="border: 2px solid #aaaaaa;"><br />Nine O\'Clock</a></div>';
	pc += '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://entdesign.entity.ro" target="_blank"><img src="pic/porto/lucru.jpg" alt="entdesign.entity.ro" style="border: 2px solid #aaaaaa;"><br />in lucru</a></div>';
	
	pc += '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://entdesign.entity.ro" target="_blank"><img src="pic/porto/muncim.jpg" alt="entdesign.entity.ro" style="border: 2px solid #aaaaaa;"><br />muncim</a></div>';
	pc += '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://entdesign.entity.ro" target="_blank"><img src="pic/porto/entdesign.jpg" alt="entdesign.entity.ro" style="border: 2px solid #aaaaaa;"><br />ENTdesign</a></div>';
	pc += '<div style="float: left; padding: 15px; width: 204px; font-size: 10pt; text-align: center;"><a href="http://entdesign.entity.ro" target="_blank"><img src="pic/porto/vrei.jpg" alt="entdesign.entity.ro" style="border: 2px solid #aaaaaa;"><br />Vrei sa fii aici?</a></div>';
	
	portoContent.set('html', pc);
	
	contactBox.inject(contactPage);
	contactTransparency.set('opacity', 1);
	contactTransparency.inject(contactBox);
	contactContent.inject(contactBox);
	contactContent.set('html', '<div style="display: block; width: 686px; text-align: center; line-height: 48pt;"><img src="pic/entdesign.jpg" alt="ENTdesign" style="margin-left: auto; margin-right: auto;"><br />divizia web<br /><img src="pic/entity.jpg" alt="Entity Consulting" style="margin-left: auto; margin-right: auto;"></div><div style="display: block; width: 686px; text-align: center;"><br /><br /><p style="text-align: center; margin-left: auto; margin-right: auto;"><a href="mailto:entdesign@entity.ro">entdesign@entity.ro</a><br /><a href="mailto:office@entity.ro">office@entity.ro</a><br /><a href="http://www.entity.ro/" target="_blank">www.entity.ro</a></p></div>');
	
	window.addEvent('resize',prepareCenter);
	realCenter();
	$('left').addEvent('mouseover',function(event){
		leftIn();
	});
	$('left').addEvent('mouseout',function(event){
		leftOut();
	});
	$('left').addEvent('click',function(event){
		moveContainerLeft();
	});
	$('right').addEvent('mouseover',function(event){
		rightIn();
	});
	$('right').addEvent('mouseout',function(event){
		rightOut();
	});
	$('right').addEvent('click',function(event){
		moveContainerRight();
	});
}	
); 

function prepareSize(){
	$clear(sizeTimeout);
	sizeTimeout = realSize.delay(500);
}

function realSize(){
	var size = window.getSize();
	currentsize = size.x;
}


function prepareCenter(){ 
	$clear(resizeTimeout); 
    resizeTimeout = realCenter.delay(500);
}

function realCenter(){ 
   var size = window.getSize();
   margin += ((size.x - currentsize)/2);
   var myFx1 = new Fx.Tween('container', { duration: 'short', transition: Fx.Transitions.linear.easeIn});
   myFx1.start('margin-left', margin);
   prepareSize();
}

function moveContainerLeft(){
	if ((test==0)&&(currentframe>1)){
		test=1;
		var myFx1 = new Fx.Tween('container', { duration: 'normal', transition: Fx.Transitions.Quad.easeIn});
		margin+=2000;
		myFx1.start('margin-left', margin);
		a=setTimeout ("test=0", 600);
		currentframe--;
	}
}

function moveContainerRight(){
	if ((test==0)&&(currentframe<maxframes)){
		test=1;
		var myFx1 = new Fx.Tween('container', { duration: 'normal', transition: Fx.Transitions.Quad.easeIn});
		margin-=2000;
		myFx1.start('margin-left', margin);
		a=setTimeout ("test=0", 600);
		currentframe++;
	}	
}


function leftIn (){
	try {
		var myFx = new Fx.Morph('left', { duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		myFx.start({
		    'opacity': [0.3, 0.6]
		});
		moveContainerLeft();
	}catch (err) {
		alert(err.description);
	}
}

function leftOut (){
	try {
		var myFx = new Fx.Morph('left', { duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		myFx.start({
		    'opacity': [0.6, 0.3]
		});
	}catch (err) {
		alert(err.description);
	}
}

function rightIn (){
	try {
		var myFx = new Fx.Morph('right', { duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		myFx.start({
		    'opacity': [0.3, 0.6]
		});
		moveContainerRight();
	}catch (err) {
		alert(err.description);
	}
}

function rightOut (){
	try {
		var myFx = new Fx.Morph('right', { duration: 'short', transition: Fx.Transitions.Sine.easeOut});
		myFx.start({
		    'opacity': [0.6, 0.3]
		});
	}catch (err) {
		alert(err.description);
	}
}