function seccionHome(divId) {
	this.divId = divId;

	this.crear = function crear() {
		$('#'+divId+' > .seccion_contenido').html('<div id="seccionHome" style="color: #6D6D6C;cursor:default;" />');
		$('#seccionHome').append('<div class="size5">INNOVACI&Oacute;N<br />CALIDAD<br />DISE&Ntilde;O</div>');
		$('#seccionHome').append('<div class="size4">Son nuestra forma de ser...</div>');
	}

	this.mostrar = function mostrar() {
		$('#logo').prepend('<img src="imagenes/logos/blanco.png" />');
		$('#logo > img:last-child').fadeOut('slow', function(){
			$(this).remove();
		});
		$('#menu').removeClass();
		$('#menu').addClass('white');
	}

	this.ocultar = function ocultar() {
	}

	this.redimensionar = function redimensionar() {
		var divHeight = parseInt($('#'+divId+' > .seccion_contenido').css('height'));
		var divWidth = parseInt($('#'+divId+' > .seccion_contenido').css('width'));

		$('#seccionHome').css('margin-top', parseInt(divHeight/4)+'px');
	}
}

function seccionQuienesSomos(divId) {
	this.divId = divId;

	this.crear = function crear() {
		$('#'+divId+' > .seccion_contenido').html('<div id="seccionQuienesSomosMiembros" style="color: #ffffff;" />');
		// Miembro uebdisain y su información
		$('#seccionQuienesSomosMiembros').append('<div id="miembroUebdisain" class="size4" style="color: #ffffff;"></div>');
		$('#miembroUebdisain').prepend('<div style="float: right;width:400px;text-align:right;">uebdisain</div>');
		$('#miembroUebdisain').prepend('<div style="float: right;width:200px;text-align:left;margin-left: 10px;"></div>');
		$('#miembroUebdisain > div:first-child').append('<a href="http://www.facebook.com/pages/uebdisain/227450940605820" target="_blank" title="Facebook"><img src="imagenes/social/facebook.png" /></a>');
		$('#miembroUebdisain > div:first-child').append('<a href="http://twitter.com/uebdisain" target="_blank" title="Twitter" style="margin-left: 10px;"><img src="imagenes/social/twitter.png" /></a>');
		$('#miembroUebdisain').append('<div class="clear" />');
		// Miembro david y su información
		$('#seccionQuienesSomosMiembros').append('<div id="miembroDavidValero" class="size4" style="color: #ffffff;margin-top: 5px;"></div>');
		$('#miembroDavidValero').prepend('<div style="float: right;width:400px;text-align:right;">David Valero</div>');
		$('#miembroDavidValero').prepend('<div style="float: right;width:200px;text-align:left;margin-left: 10px;"></div>');
		$('#miembroDavidValero > div:first-child').append('<a href="http://www.facebook.com/davidvaleroabad" target="_blank" title="Facebook"><img src="imagenes/social/facebook.png" /></a>');
		//$('#miembroDavidValero > div:first-child').append('<a href="http://twitter.com/david_ud" target="_blank" title="Twitter" style="margin-left: 10px;"><img src="imagenes/social/twitter.png" /></a>');
		$('#miembroDavidValero > div:first-child').append('<a href="http://ar.linkedin.com/in/dvalero" target="_blank" title="Linked In" style="margin-left: 10px;"><img src="imagenes/social/linkedin.png" /></a>');
		$('#miembroDavidValero').append('<div class="clear" />');
		// Miembro daniela y su información
		$('#seccionQuienesSomosMiembros').append('<div id="miembroDaniela" class="size4" style="color: #ffffff;margin-top: 5px;"></div>');
		$('#miembroDaniela').prepend('<div style="float: right;width:400px;text-align:right;">Daniela</div>');
		$('#miembroDaniela').prepend('<div style="float: right;width:200px;text-align:left;margin-left: 10px;"></div>');
		$('#miembroDaniela > div:first-child').append('<a href="#" target="_blank" title="Facebook"><img src="imagenes/social/facebook.png" /></a>');
		//$('#miembroDaniela > div:first-child').append('<a href="#" target="_blank" title="Twitter" style="margin-left: 10px;"><img src="imagenes/social/twitter.png" /></a>');
		$('#miembroDaniela > div:first-child').append('<a href="#" target="_blank" title="Linked In" style="margin-left: 10px;"><img src="imagenes/social/linkedin.png" /></a>');
		$('#miembroDaniela').append('<div class="clear" />');

		$('#'+divId+' > .seccion_contenido').append('<div id="seccionQuienesSomosTexto" class="size2" />');
		$('#seccionQuienesSomosTexto').append('<div class="colIzq" style="color: #6D6D6C;float:left;text-align: justify;">\
			<b>Uebdisain</b> est&aacute; formado por un grupo de j&oacute;venes que aportan ideas innovadoras para encajar los nuevos proyectos en la tendencia actual de dise&ntilde;o web.<br />\
			Ofrecemos soluciones y asesoramiento en programaci&oacute;n, dise&ntilde;o y alojamiento de su sitio web, tanto para empresas como para particulares.<br />\
			<br />\
			Tambi&eacute;n ofrecemos otros servicios como renovaci&oacute;n de la imagen de su empresa, campa&ntilde;as de publicidad a trav&eacute;s de nuestra plataforma de env&iacute;o correo electr&oacute;nico y posicionamiento web.\
			</div>');
		$('#seccionQuienesSomosTexto').append('<div class="colDer" style="color: #6D6D6C;float:right;text-align: justify;">\
			Nos comprometemos a llevar a cabo su proyecto con atenci&oacute;n personalizada, que garantizar&aacute; que lo que nosotros desarrollemos sea lo que realmente necesita.<br />Nos comprometemos a hacerlo de forma profesional, siguiendo los est&aacute;ndares actuales y realizando su proyecto con la mayor calidad y rapidez posible.<br />\
			<br />\
			Operamos por internet as&iacute; que no tenemos restricciones. Sea de donde sea, no dude en <a href="#Contacto" class="size2" onclick="javascript:verSeccion(13);" title="Contacto" style="font-weight:bold;">consultarnos</a>.\
			</div>');
		$('#seccionQuienesSomosTexto').append('<div class="clear" />');

	}

	this.mostrar = function mostrar() {
		$('#logo').prepend('<img src="imagenes/logos/gris.png" />');
		$('#logo > img:last-child').fadeOut('slow', function(){
			$(this).remove();
		});
		$('#menu').removeClass();
		$('#menu').addClass('green');

		/*$('#seccionQuienesSomosMiembros > div, #seccionQuienesSomosTexto').fadeOut(0).each(function(i, element) {
			setTimeout(function() {
				$(element).fadeIn('slow');
			}, i*500);
		});*/
	}

	this.ocultar = function ocultar() {
	}

	this.redimensionar = function redimensionar() {
		var divHeight = parseInt($('#'+divId+' > .seccion_contenido').css('height'));
		var divWidth = parseInt($('#'+divId+' > .seccion_contenido').css('width'));

		$('#seccionQuienesSomosMiembros').css({'margin' : '0 auto', 'margin-top' : parseInt(divHeight*0.05)+'px', 'width' : '650px'});
		$('#seccionQuienesSomosTexto').css({'margin' : '0 auto', 'margin-top' : parseInt(divHeight*0.20)+'px', 'width' : parseInt(divWidth*0.82)+'px'});
		$('#seccionQuienesSomosTexto > .colIzq').css({'width' : parseInt(divWidth*0.4)+'px'});
		$('#seccionQuienesSomosTexto > .colDer').css({'width' : parseInt(divWidth*0.4)+'px'});

	}
}

function seccionServicios(divId) {
	this.divId = divId;

	this.crear = function crear() {
		$('#'+divId+' > .seccion_contenido').html('<div id="cajaSitiosWeb" class="cajaServicio" style="position: absolute;"><div class="cajaServicioFondo" style="position:absolute;"><img src="imagenes/servicios/fondoSitiosWeb.png" /></div><div class="cajaServicioTexto size2">\
			<div style="width:100%;">\
				<div style="padding-bottom: 3px; border-bottom: 1px solid #9ed7e3;" class="size3">Sitios web</div>\
				Nuestra especialidad, realizar proyectos web innovadores y con un estilo limpio y moderno.\
				Entre otros servicios ofrecemos:<br />\
				<ul>\
					<li>Sitios corporativos para su emprendimiento.</li>\
					<li>Aplicaciones web: tienda virtual, gestores de contenido, etc.</li>\
					<li>Redise&ntilde;o de su sitio.</li>\
					<li>Mantenimiento.</li>\
				</ul>\
				Usamos tecnolog&iacute;as actuales como Flash, PHP, HTML 5, CSS3, MySQL, Javascript, etc.\
			</div>\
		</div></div>');
		$('#'+divId+' > .seccion_contenido').append('<div id="cajaDisenoGrafico" class="cajaServicio" style="position: absolute;"><div class="cajaServicioFondo" style="position:absolute;"><img src="imagenes/servicios/fondoSitiosWeb.png" /></div><div class="cajaServicioTexto size2">\
			<div style="width:100%;">\
				<div style="padding-bottom: 3px; border-bottom: 1px solid #ffffff;" class="size3">Dise&ntilde;o gr&aacute;fico</div>\
				Dise&ntilde;o completo de la identidad de su negocio:\
				<ul>\
					<li>Logotipo.</li>\
					<li>Tarjetas Personales.</li>\
					<li>Folletos.</li>\
					<li>Cat&aacute;logos de productos.</li>\
					<li>Boletines publicitarios.</li>\
				</ul>\
			</div>\
		</div></div>');
		$('#'+divId+' > .seccion_contenido').append('<div id="cajaOtrosServicios" class="cajaServicio" style="position: absolute;"><div class="cajaServicioFondo" style="position:absolute;"><img src="imagenes/servicios/fondoOtrosServicios.png" /></div><div class="cajaServicioTexto size2">\
			<div>\
				<div style="padding-bottom: 3px; border-bottom: 1px solid #ffffff;" class="size3">Otros servicios</div>\
				<ul>\
					<li>Alojamiento web con servidores dedicados.</li>\
					<li>Registro de dominios.</li>\
					<li>Posicionamiento web.</li>\
					<li>Email marketing.</li>\
					<li>Consultor&iacute;as.</li>\
					<li>Soluciones digitales en otros lenguajes como Java, Perl, C, etc.</li>\
				</ul>\
				Si el servicio por el cual est&aacute; interesado no aparece, no dude en <a href="#Contacto" class="size2" onclick="javascript:verSeccion(13);" title="Contacto" style="font-weight:bold;color:#ffffff;">consultarnos</a>.\
			</div>\
		</div></div>');
	}

	this.mostrar = function mostrar() {
		$('#logo').prepend('<img src="imagenes/logos/verde.png" />');
		$('#logo > img:last-child').fadeOut('slow', function(){
			$(this).remove();
		});
		$('#menu').removeClass();
		$('#menu').addClass('green');
	}

	this.ocultar = function ocultar() {
	}

	this.redimensionar = function redimensionar() {
		var newHeight = 0;

		var divHeight = parseInt($('#'+divId+' > .seccion_contenido').css('height'));
		var divWidth = parseInt($('#'+divId+' > .seccion_contenido').css('width'));
		var cajaSitiosWebWidth = parseInt(divWidth*0.45);
		var cajaSitiosWebHeight = parseInt(divHeight*0.42);
		var cajaSitiosWebTop = parseInt(divHeight*0.10);
		var cajaSitiosWebLeft = parseInt(divWidth*0.05);
		var cajaSitiosWebTextoPaddingTop = cajaSitiosWebHeight*0.04;
		var cajaSitiosWebTextoPaddingRight = cajaSitiosWebWidth*0.04;
		var cajaSitiosWebTextoPaddingBottom = cajaSitiosWebHeight*0.04;
		var cajaSitiosWebTextoPaddingLeft = cajaSitiosWebWidth*0.04;
		var cajaSitiosWebTextoWidth = cajaSitiosWebWidth-cajaSitiosWebTextoPaddingLeft-cajaSitiosWebTextoPaddingRight;
		var cajaSitiosWebTextoHeight = cajaSitiosWebHeight-cajaSitiosWebTextoPaddingTop-cajaSitiosWebTextoPaddingBottom;

		$('#cajaSitiosWeb').css({'width' : cajaSitiosWebWidth+'px', 'height' : cajaSitiosWebHeight+'px', 'top' : cajaSitiosWebTop+'px', 'left' : cajaSitiosWebLeft+'px'});
		$('#cajaSitiosWeb > .cajaServicioFondo > img').css({'width' : cajaSitiosWebWidth+'px', 'height' : cajaSitiosWebHeight+'px'});
		$('#cajaSitiosWeb > .cajaServicioTexto').css({'padding' : cajaSitiosWebTextoPaddingTop+'px '+cajaSitiosWebTextoPaddingRight+'px '+cajaSitiosWebTextoPaddingBottom+'px '+cajaSitiosWebTextoPaddingLeft+'px', 'width': cajaSitiosWebTextoWidth+'px', 'height': cajaSitiosWebTextoHeight+'px'});

		var cajaDisenoGraficoWidth = parseInt(divWidth*0.40);
		var cajaDisenoGraficoHeight = parseInt(divHeight*0.30);
		var cajaDisenoGraficoTop = parseInt(divHeight*0.14);
		var cajaDisenoGraficoRight = parseInt(divWidth*0.05);
		var cajaDisenoGraficoTextoPaddingTop = cajaDisenoGraficoHeight*0.04;
		var cajaDisenoGraficoTextoPaddingRight = cajaDisenoGraficoWidth*0.04;
		var cajaDisenoGraficoTextoPaddingBottom = cajaDisenoGraficoHeight*0.04;
		var cajaDisenoGraficoTextoPaddingLeft = cajaDisenoGraficoWidth*0.04;
		var cajaDisenoGraficoTextoWidth = cajaDisenoGraficoWidth-cajaDisenoGraficoTextoPaddingLeft-cajaDisenoGraficoTextoPaddingRight;
		var cajaDisenoGraficoTextoHeight = cajaDisenoGraficoHeight-cajaDisenoGraficoTextoPaddingTop-cajaDisenoGraficoTextoPaddingBottom;

		$('#cajaDisenoGrafico').css({'width' : cajaDisenoGraficoWidth+'px', 'height' : cajaDisenoGraficoHeight+'px', 'top' : cajaDisenoGraficoTop+'px', 'right' : cajaDisenoGraficoRight+'px'});
		$('#cajaDisenoGrafico > .cajaServicioFondo > img').css({'width' : cajaDisenoGraficoWidth+'px', 'height' : cajaDisenoGraficoHeight+'px'});
		$('#cajaDisenoGrafico > .cajaServicioTexto').css({'padding' : cajaDisenoGraficoTextoPaddingTop+'px '+cajaDisenoGraficoTextoPaddingRight+'px '+cajaDisenoGraficoTextoPaddingBottom+'px '+cajaDisenoGraficoTextoPaddingLeft+'px', 'width': cajaDisenoGraficoTextoWidth+'px', 'height': cajaDisenoGraficoTextoHeight+'px'});

		var cajaOtrosServiciosWidth = parseInt(divWidth*0.46);
		var cajaOtrosServiciosHeight = parseInt(divHeight*0.37);
		var cajaOtrosServiciosTop = parseInt(divHeight*0.05)+cajaSitiosWebHeight+cajaSitiosWebTop;
		var cajaSitiosWebLeft = parseInt(divWidth*0.27);
		var cajaOtrosServiciosTextoPaddingTop = cajaOtrosServiciosHeight*0.04;
		var cajaOtrosServiciosTextoPaddingRight = cajaOtrosServiciosWidth*0.12;
		var cajaOtrosServiciosTextoPaddingBottom = cajaOtrosServiciosHeight*0.04;
		var cajaOtrosServiciosTextoPaddingLeft = cajaOtrosServiciosWidth*0.04;
		var cajaOtrosServiciosTextoWidth = cajaOtrosServiciosWidth-cajaOtrosServiciosTextoPaddingLeft-cajaOtrosServiciosTextoPaddingRight;
		var cajaOtrosServiciosTextoHeight = cajaOtrosServiciosHeight-cajaOtrosServiciosTextoPaddingTop-cajaOtrosServiciosTextoPaddingBottom;

		$('#cajaOtrosServicios').css({'width' : cajaOtrosServiciosWidth+'px', 'height' : cajaOtrosServiciosHeight+'px', 'top' : cajaOtrosServiciosTop+'px', 'left' : cajaSitiosWebLeft+'px'});
		$('#cajaOtrosServicios > .cajaServicioFondo > img').css({'width' : cajaOtrosServiciosWidth+'px', 'height' : cajaOtrosServiciosHeight+'px'});
		$('#cajaOtrosServicios > .cajaServicioTexto').css({'padding' : cajaOtrosServiciosTextoPaddingTop+'px '+cajaOtrosServiciosTextoPaddingRight+'px '+cajaOtrosServiciosTextoPaddingBottom+'px '+cajaOtrosServiciosTextoPaddingLeft+'px', 'width': cajaOtrosServiciosTextoWidth+'px'});
	}
}

function seccionPortfolio(divId) {
	this.divId = divId;
	this.portfolio;
	var portfolio;

	this.crear = function crear() {
		$('#'+divId+' > .seccion_contenido').html('<div id=""></div>');
		$('#'+divId).append('<div id="portfolio"></div>');

		$.ajax({
			url			: 'api/obtenerPortfolio.php',
			async		: false,
			dataType	: 'json',
			success		: function(data){
				portfolio = data;
			}
		});

		verPortfolio(portfolio);
	}

	this.mostrar = function mostrar() {
		$('#logo').prepend('<img src="imagenes/logos/blanco.png" />');
		$('#logo > img:last-child').fadeOut('slow', function(){
			$(this).remove();
		});
		$('#menu').removeClass();
		$('#menu').addClass('white');
		$('#portfolio').stop().fadeIn(300);
		//$('#portfolio > #portfolioOverlay').stop().fadeIn(0);
		//$('#portfolio > #visorImagen').stop().fadeIn(0);
		//$('#portfolio > #visorMiniaturas').stop().fadeIn(0);
		$('#menu').css({'opacity' : '0.5', 'filter' : 'alpha(opacity=50)', '-moz-opacity' : '0.5'});
		$('#logo').css({'opacity' : '0.5', 'filter' : 'alpha(opacity=50)', '-moz-opacity' : '0.5'});

		if($('#portfolioInfo > span').length <= 0) {
			$('.miniaturaP > img:first').trigger('click');
		}
	}

	this.ocultar = function ocultar() {
		$('#portfolio').stop().fadeOut(300);
		$('#menu').css({'opacity' : '1', 'filter' : 'alpha(opacity=100)', '-moz-opacity' : '1'});
		$('#logo').css({'opacity' : '1', 'filter' : 'alpha(opacity=100)', '-moz-opacity' : '1'});
	}

	this.redimensionar = function redimensionar() {
		var divHeight = parseInt($('#'+divId+' > .seccion_contenido').css('height'));
		var divWidth = parseInt($('#'+divId+' > .seccion_contenido').css('width'));
		var pageHeight = parseInt(getPageHeight());
		var pageWidth = parseInt(getPageWidth());

		$('#portfolio').css({'width' : pageWidth+'px', 'height' : pageHeight+'px'});

		redimensionarPortfolio();
	}
}

function seccionContacto(divId) {
	this.divId = divId;

	this.crear = function crear() {
		$('#'+divId+' > .seccion_contenido').html('<div id="formContactoDiv" style="margin:0px auto;width: 615px;color: #ffffff;" class="size2"><div style="width: 80%;margin: 0px auto;">A trav&eacute;s de este formulario puedes contactar con nosotros. No dudes en pedirnos presupuesto o realizar cualquier otra consulta sin compromiso.<br><br></div><form id="formularioContacto" class="udForm" method="post" onsubmit="javascript:return false;"></form></div><div id="mensajeContactoDiv" style="display:none;margin: 0px auto;width:700px;" class="size3"></div>');
		$('#formularioContacto').html('<fieldset class="size2"></fieldset>');
		$('#formularioContacto > fieldset').html('<div class="filaFormulario"></div>');
		$('#formularioContacto > fieldset > div:last').append('<label for="formularioCampoNombre">Nombre</label>');
		$('#formularioContacto > fieldset > div:last').append('<input type="text" name="nombre" id="formularioCampoNombre" />');
		$('#formularioContacto > fieldset').append('<div class="filaFormulario"></div>');
		$('#formularioContacto > fieldset > div:last').append('<label for="formularioCampoEmail">Email</label>');
		$('#formularioContacto > fieldset > div:last').append('<input type="text" name="email" id="formularioCampoEmail" />');
		$('#formularioContacto > fieldset').append('<div class="filaFormulario"></div>');
		$('#formularioContacto > fieldset > div:last').append('<label for="formularioCampoTelefono">Tel&eacute;fono</label>');
		$('#formularioContacto > fieldset > div:last').append('<input type="text" name="telefono" id="formularioCampoTelefono" />');
		$('#formularioContacto > fieldset').append('<div class="filaFormulario"></div>');
		$('#formularioContacto > fieldset > div:last').append('<label for="formularioCampoMensaje">Mensaje</label>');
		$('#formularioContacto > fieldset > div:last').append('<textarea name="mensaje" id="formularioCampoMensaje"></textarea>');
		$('#formularioContacto > fieldset').append('<div class="filaFormulario"></div>');
		$('#formularioContacto > fieldset > div:last').append('<a href="#contacto" class="size2" style="float:right;margin-right:30px;color:#ffffff;" onclick="javascript:enviarFormularioContacto()">ENVIAR</a>');

		$('#formularioContacto input:text').attr('autocomplete', 'off');
	}

	this.mostrar = function mostrar() {
		$('#logo').prepend('<img src="imagenes/logos/gris.png" />');
		$('#logo > img:last-child').fadeOut('slow', function(){
			$(this).remove();
		});
		$('#menu').removeClass();
		$('#menu').addClass('green');
	}

	this.ocultar = function ocultar() {
	}

	this.redimensionar = function redimensionar() {
		var divHeight = parseInt($('#'+divId+' > .seccion_contenido').css('height'));
		var divWidth = parseInt($('#'+divId+' > .seccion_contenido').css('width'));
		var formHeight = parseInt($('#formContactoDiv').css('height'));

		$('#formContactoDiv').css('margin-top', parseInt((divHeight - formHeight) / 2)+'px');
	}
}