var span1 = $$('#span1');
var span2 = $$('#span2');
var span3 = $$('#span3');
var span4 = $$('#span4');
var span5 = $$('#span5');

var pane1 = $('pane1');
var pane2 = $('pane2');
var pane3 = $('pane3');
var pane4 = $('pane4');

var contenthome1 = ('<h2>Welcome to VoltLogic!</h2>VoltLogic is a custom web design firm that specializes in conveying the message of our clients.  We realize that in the digital age it is not enough to just put something on the web- you have to put something spectacular on the web.  <img src="img/1.jpg" align=right hspace=15 vspace=15> That\'s why we spend extra time perfecting the latest technologies and programming techniques.  Communication throughout the entire process allows us to understand your needs and provide the best final product possible.  Our expert team draws upon years of design and coding experience to turn your vision for a website into reality.  We use an assortment of styles and technologies to bring to life even the most challenging projects.  We specialize in graphic design and logo design as well, allowing us to provide  a complete marketing suite.  With VoltLogic you can be assured that the end result will impress both you and your audience.')

var contenthome2 = ('<h2>Efficient Design</h2>  <img src="img/3.jpg" align=right hspace=10 vspace=10> VoltLogic takes great care during the design process to ensure that timelines are met and milestones accomplished.')

var contenthome3 = ('<h2>Unique Layout</h2>  <img src="img/2.jpg" align=right hspace=10 vspace=10> Be Different.  Set yourself apart with a custom designed layout from VoltLogic.  Every layout is guaranteed to be custom built to fit your needs.')

var contentabout1 = ('<h2>Our Team</h2>  <img src="img/4.jpg" align=left hspace=10 vspace=10> VoltLogic has a dedicated team of professionals to help develop a top notch website.  We have experience working with a number of different technologies and implementations in the web design field.  These include html, css, javascript, java, php, ruby, perl, python, mysql, actionscript, flex, open laszlo, xml, json, and web services.  We also use industry standard development programs including Adobe Photoshop, Illustrator, Flash, QuarkXPress, and Final Cut Pro to create the media content for your site.  Whatever technology your project requires, our team of experts can deliver.')

var contentabout2 = ('<h2>Our Mission</h2> VoltLogic\'s mission is to provide the highest quality web content to our customers.  We strive to set ourselves apart from the competition by delivering custom designed web and graphics solutions at affordable prices.  We believe that technology is not an end goal in itself, but just a pathway to a satisfied customer.  We understand that the most important part of the web design process is you!')


var contentservices1 = ('<h2>Web Design</h2> <img src="img/5.jpg" align=right hspace=10 vspace=10>  Impress your customers with our state of the art web design services.')

var contentservices2 = ('<h2>Web Applications</h2> <img src="img/6.jpg" align=right hspace=10 vspace=10>  Utilize the latest Web 2.0 technologies to help your business run more effectively.')

var contentservices3 = ('<h2>Logo Design</h2> <img src="img/7.jpg" align=right hspace=10 vspace=10>  Get a custom made logo that fits your organization\'s personality and style.')

var contentservices4 = ('<h2>Graphic Design</h2> <img src="img/8.jpg" align=right hspace=10 vspace=10>  We offer custom designed graphics perfect for flyers, brochures, mailers and other marketing materials.')

var contentpricing1 = ('<h2>Web Design Packages</h2>  We offer three levels of website design services- for custom projects and pricing on our other services please contact us:<br><br><b>$799- Starter Package</b><br><br>3-5 page informational website that includes content management system, up to 3 webforms, dynamic content delivery, and 1 custom built flash plugin.  <br><br><br><b>$1199- Standard Package</b><br><br>5-10 page informational website that includes content management system, up to 6 webforms, dynamic content delivery, and 3 custom built flash plugins.  <br><br><br><b>$1599- Deluxe Package</b><br><br>10-20 page e-commerce website that includes e-commerce management suite, content management system, up to 9 webforms, dynamic content delivery, and up to 6 custom built flash plugins.')

var contentcontact1 = ('<h2>Contact Information</h2>  VoltLogic<br>229 Bonita Ave.<br>South San Francisco, CA 94080<br><br>Sales: (650) 580-7081<br>Tech Support: (415) 385-0317<br><br>E-mail: <a href="mailto:info@voltlogic.com">info@voltlogic.com </a><br><br><img src="img/9.jpg">')

var contentcontact2 = ('<h2>E-mail Us</h2>  <form action="mailsend.php" target="_self" method="post" enctype="application/x-www-form-urlencoded" name="form1"><table border="0"><tr><td class="content" colspan=2>Please fill in the information below and press the submit button.<br><br></td></tr><tr><td class="content">Your Name</td><td><input name="from" type="text" id="from" size="20"></td></tr><tr><td class="content">Your E-mail Address</td><td><input name="replyto" type="text" size="20"></td></tr><tr><td class="content" valign="top">Message</td><td><textarea name="msg" cols="30" rows="8" id="msg"></textarea></td></tr><tr><td></td><td><input type="submit" name="Submit" value="Submit"></td></tr></table></form>')

var contactlink = $('contactlink');
			
var pane1move = new Fx.Styles(pane1, {
	duration: 300,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});
			

var pane2move = new Fx.Styles(pane2, {
	duration: 300,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

var pane3move = new Fx.Styles(pane3, {
	duration: 300,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

var pane4move = new Fx.Styles(pane4, {
	duration: 300,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});



var menu = 1;

var blue = new Asset.image('blocks/block_blue.png');
var green = new Asset.image('blocks/block_green.png');
var red = new Asset.image('blocks/block_red.png');
var purple = new Asset.image('blocks/block_purple.png');
var cyan = new Asset.image('blocks/block_cyan.png');

blue.inject('image1');
green.inject('image2');
red.inject('image3');
purple.inject('image4');
cyan.inject('image5');

var greeninit = new Fx.Style(green, 'opacity').set(0);
var redinit = new Fx.Style(red, 'opacity').set(0);
var purpleinit = new Fx.Style(purple, 'opacity').set(0);
var cyaninit = new Fx.Style(cyan, 'opacity').set(0);



var greensize = new Fx.Styles(green);
		greensize.start({'height': ['400px'], 'width': ['640px'] });
		
var redsize = new Fx.Styles(red);
		redsize.start({'height': ['400px'], 'width': ['640px'] });
		
var purplesize = new Fx.Styles(purple);
		purplesize.start({'height': ['400px'], 'width': ['640px'] });
		
var cyansize = new Fx.Styles(cyan);
		cyansize.start({'height': ['400px'], 'width': ['640px'] });

var loading = new Fx.Styles(blue, {
	duration: 900,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

		blue.inject('image1');

		loading.start({'opacity': [0, 1], 'height': ['40px', '400px'], 'width': ['60px', '640px'] });

		pane1move.start({'width': '280px', 'opacity': '.7'}).chain(function(){  this.start({'height':  '330px'});  })
		.chain(function(){
		
		pane2move.start({'width': '280px', 'opacity': '.7'}).chain(function(){  this.start.delay(0, this, {'height':  '130px'});  })
		.chain(function(){
		pane3move.start({'width': '280px', 'opacity': '.7'}).chain(function(){  this.start.delay(0, this, {'height':  '170px'});  })
			});
			});

var fadegreen = new Fx.Styles(green, {
	duration: 700,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

var fadered = new Fx.Styles(red, {
	duration: 700,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

var fadepurple = new Fx.Styles(purple, {
	duration: 700,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});

var fadecyan = new Fx.Styles(cyan, {
	duration: 700,
	wait: false,
	transition: Fx.Transitions.Quad.easeOut
});


span1.addEvent('mouseenter', function(){

if (menu != 1){
	
			if (menu == 2){
			fadegreen.start({ 'opacity': [1, 0] });
				}
			if (menu == 3){
			fadered.start({ 'opacity': [1, 0] });
				}
			if (menu == 4){
			fadepurple.start({ 'opacity': [1, 0] });
				}
			if (menu == 5){
fadecyan.start({ 'opacity': [1, 0] });
				}
}
		
		pane1.setHTML(contenthome1);
		pane2.setHTML(contenthome2);
		pane3.setHTML(contenthome3);
		menu = 1;			
		
		pane1move.start({'top': '180px', 'left': '15px', 'width': '280px', 'height': '330px', 'opacity': '.7'});
		pane2move.start({'top': '180px', 'left': '330px', 'width': '280px', 'height': '130px', 'opacity': '.7'});
		pane3move.start({'top': '340px', 'left': '330px', 'width': '280px', 'height': '170px', 'opacity': '.7'});
		pane4move.start({'opacity': '0'});
	});	

span2.addEvent('mouseenter', function(){

if (menu != 2){
fadegreen.start({ 'opacity': [0, 1] });


		
			if (menu == 3){
fadered.start({ 'opacity': [1, 0] });
				}
			if (menu == 4){
fadepurple.start({ 'opacity': [1, 0] });
				}
			if (menu == 5){
fadecyan.start({ 'opacity': [1, 0] });
				}
};
		

		pane1.setHTML(contentabout1);
		pane2.setHTML(contentabout2);
		
		menu = 2;	
		
		pane1move.start({'top': '180px', 'left': '15px', 'width': '280px', 'height': '280px', 'opacity': '.7'});
		pane2move.start({'top': '180px', 'left': '330px', 'width': '280px', 'height': '150px', 'opacity': '.7'});
		pane3move.start({'opacity': '0'});
		pane4move.start({'opacity': '0'});
	});


span3.addEvent('mouseenter', function(){
	if (menu != 3){
	fadered.start({ 'opacity': [0, 1] });
	
	
			if (menu == 2){
fadegreen.start({ 'opacity': [1, 0] });
				}
			if (menu == 4){
fadepurple.start({ 'opacity': [1, 0] });
				}
			if (menu == 5){
fadecyan.start({ 'opacity': [1, 0] });
				}
	
	};
		pane1.setHTML(contentservices1);
		pane2.setHTML(contentservices2);
		pane3.setHTML(contentservices3);
		pane4.setHTML(contentservices4);
		menu = 3;			
		
		
		pane1move.start({'top': '180px', 'left': '15px', 'width': '280px', 'height': '150px', 'opacity': '.7'});
		pane2move.start({'top': '180px', 'left': '330px', 'width': '280px', 'height': '150px', 'opacity': '.7'});
		pane3move.start({'top': '360px', 'left': '15px', 'width': '280px', 'height': '150px', 'opacity': '.7'});
		pane4move.start({'top': '360px', 'left': '330px', 'width': '280px', 'height': '150px', 'opacity': '.7'});
		
	});


span4.addEvent('mouseenter', function(){
		
		
		if (menu != 4){
	fadepurple.start({ 'opacity': [0, 1] });
	
	
			if (menu == 2){
fadegreen.start({ 'opacity': [1, 0] });
				}
			if (menu == 3){
fadered.start({ 'opacity': [1, 0] });
				}
			if (menu == 5){
fadecyan.start({ 'opacity': [1, 0] });
				}
	
	};
		
		
		pane1.setHTML(contentpricing1);
		menu = 4;	
		
		
		
		pane1move.start({'top': '180px', 'left': '15px', 'width': '585px', 'height': '320px', 'opacity': '.7'});
		pane2move.start({'opacity': '0'});
		pane3move.start({'opacity': '0'});
		pane4move.start({'opacity': '0'});
		
		
	});



span5.addEvent('mouseenter', function(){
		
		if (menu != 5){
		fadecyan.start({ 'opacity': [0, 1] });
	
	
			if (menu == 2){
fadegreen.start({ 'opacity': [1, 0] });
				}
			if (menu == 3){
fadered.start({ 'opacity': [1, 0] });
				}
			if (menu == 4){
fadepurple.start({ 'opacity': [1, 0] });
				}
	};
		
		pane1.setHTML(contentcontact1);
		pane2.setHTML(contentcontact2);
		menu = 5;	
		
		
		pane1move.start({'top': '180px', 'left': '15px', 'width': '170px', 'height': '250px', 'opacity': '.7'});
		pane2move.start({'top': '180px', 'left': '222px', 'width': '380px', 'height': '310px', 'opacity': '.7'});
		pane3move.start({'opacity': '0'});
		pane4move.start({'opacity': '0'});
		
		
		
	});
	
	
	
	//contentlink.addEvent('mouseenter', function(){
	//pane1.setHTML('test');
	//}
	
	
	/*
		var x = new Chain();
	var one = function(){
		pane1move.start({'width': '280px'}); 
		 
		};
	var two = function(){
		
		pane1move.start({'height': '280px'});  
		};
	var three = function(){
		
		pane2move.start({'width': '280px'});  
		};
	var four = function(){
		
		pane2move.start({'height': '280px'});  
		};



	x.chain(one);
	x.chain(two);
	x.chain(three);
	x.chain(four);
	x.callChain();
	x.callChain.delay(1000, x);
	x.callChain.delay(1000, x);
	x.callChain.delay(1000, x);
	x.callChain.delay(1000, x);
		*/