// JavaScript Document
$(document).ready(function(){
						   
	$('#w3schools').hover(function(e) {
		var html = '<div id="w3_info">';
		html +=    '<h4>w3Schools.com</h4>';
		html +=	   '<img src="images/w3schoolspoplogo.png" alt="w3Schools logo" />';
		html +=	   '<p>W3Schools is a web developers portal, with tutorials and references relating to web development subjects, including HTML, XML, CSS, JavaScript, PHP, and SQL. <br/>W3Schools is free of charge.</p>';
		html +=		'</div>';
 
		$('body').append(html).children('#w3_info').hide().fadeIn(100);
		$('#w3_info').animate({"width" : "0px","width" : "450px"}, 100);
		$('#w3_info').css('top', e.pageY + -20).css('left', e.pageX + 50);
			
	}, function() {
		$('#w3_info').animate({"width" : "450px","width" : "0px"}, 100);
		$('#w3_info').fadeOut(10);
	});
	
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#ajax').hover(function(e) {
		var html = '<div id="ajax_info">';
		html +=    '<h4>ajax.org</h4>';
		html +=	   '<img src="images/ajaxpoplogo.png" alt="w3Schools logo" />';
		html +=	   '<p>The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without refreshing the page.</p>';
		html +=		'</div>';
 
		$('body').append(html).children('#ajax_info').hide().fadeIn(100);
		$('#ajax_info').animate({"width" : "0px","width" : "450px"}, 100);
		$('#ajax_info').css('top', e.pageY + -20).css('left', e.pageX + 50);
			
	}, function() {
		$('#ajax_info').animate({"width" : "450px","width" : "0px"}, 100);
		$('#ajax_info').fadeOut(10);
	});
	
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#php').hover(function(e) {
		var html = '<div id="php_info">';
		html +=    '<h4>PHP.net</h4>';
		html +=	   '<img src="images/phppoplogo.png" alt="w3Schools logo" />';
		html +=	   '<p>The main implementation of PHP is now produced by The PHP Group and serves as the de facto standard for PHP as there is no formal specification. <br/>PHP is free software released under the PHP License.</p>';
		html +=		'</div>';
 
		$('body').append(html).children('#php_info').hide().fadeIn(100);
		$('#php_info').animate({"width" : "0px","width" : "450px"}, 100);
		$('#php_info').css('top', e.pageY + -20).css('left', e.pageX + 50);
			
	}, function() {
		$('#php_info').animate({"width" : "450px","width" : "0px"}, 100);
		$('#php_info').fadeOut(10);
	});


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#mysql').hover(function(e) {
		var html = '<div id="mysql_info">';
		html +=    '<h4>mysql.com</h4>';
		html +=	   '<img src="images/mysqlpoplogo.png" alt="w3Schools logo" />';
		html +=	   '<p>MySQL is often used in free software projects that require a full-featured database management system, including projects such as WordPress, phpBB and other software built on the LAMP software stack.</p>';
		html +=		'</div>';
 
		$('body').append(html).children('#mysql_info').hide().fadeIn(100);
		$('#mysql_info').animate({"width" : "0px","width" : "450px"}, 100);
		$('#mysql_info').css('top', e.pageY + -20).css('left', e.pageX + 50);
			
	}, function() {
		$('#mysql_info').animate({"width" : "450px","width" : "0px"}, 100);
		$('#mysql_info').fadeOut(10);
	});
	
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#finalcut').hover(function(e) {
		var html = '<div id="finalcut_info">';
		html +=    '<h4>apple.com</h4>';
		html +=	   '<img src="images/FinalCutPropoplogo.png" alt="w3Schools logo" />';
		html +=	   '<p>Final Cut Pro is a professional non-linear editing software application developed by Apple Inc. The current version of the application is only available for Mac OS X, and is a module of the Final Cut Studio product.</p>';
		html +=		'</div>';
 
		$('body').append(html).children('#finalcut_info').hide().fadeIn(100);
		$('#finalcut_info').animate({"width" : "0px","width" : "450px"}, 100);
		$('#finalcut_info').css('top', e.pageY + -20).css('left', e.pageX + 50);
			
	}, function() {
		$('#finalcut_info').animate({"width" : "450px","width" : "0px"}, 100);
		$('#finalcut_info').fadeOut(10);
	});
	
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#starterhouse').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>Starter House for sale</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is driven by a MySQL database backend. <br/>Page navigation is driven from MySQL database. <br/>Page content text is XML file. <br/>Lightbox is used as image viewer. <br/>&nbsp;&nbsp;A PHP on-line contact form is used.<br/>&nbsp;&nbsp;CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is HTML 4.01 Transitional</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideToggle(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#starterhouse').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#tam').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>Todd A. McClintick - Graphic Designer</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is Flash 8 Pro. and ActionScript 2<br/> Each page is a separate HTML file with SWF embedded.<br/>Index page is AS2 code.<br/>Page headers are Flash timeline.<br/>&nbsp;&nbsp;Page images are Flash timeline.<br/>&nbsp;&nbsp;Page content text is XML file.<br/>&nbsp;&nbsp;A PHP on-line contact form is used.<br/>&nbsp;&nbsp;CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is XHTML 1.0 Transitional</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#tam').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#yourstory').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>Your Story - Event Planners</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This is a re-design Flash 8 Pro. and ActionScript 2<br/> Each page is a separate HTML file with SWF embedded.<br/>Index page animation is AS2 code.<br/>Page content text is XML file.<br/>&nbsp;&nbsp;A PHP on-line contact form is used.</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#yourstory').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#blumvogue').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>Blum Vogue Limited - Model Management</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is Flash 8 Pro. and ActionScript 2<br/> Each page is a separate HTML file with SWF embedded.<br/>Index page animation is AS2 code.<br/>Content page animations are AS2 code.<br/>&nbsp;&nbsp;Content pages text is XML file.<br/>&nbsp;&nbsp;A PHP on-line contact form is used.<br/>&nbsp;&nbsp;CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is XHTML 1.0 Transitional</p>';
		html +=		'</div>';
		
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#blumvogue').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#openhouse').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>AplhaGraphics - Open House</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is Flash 8 Pro. and ActionScript 2<br/> Each page is a separate HTML file with SWF embedded.<br/>Index page animation is AS2 code.<br/>Content page animations are AS2 code.<br/>&nbsp;&nbsp;A PHP on-line contact form is used.</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#openhouse').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#dadapress').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>Dada Press - Adult Greeting Cards</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is Flash 8 Pro. and ActionScript 2<br/> Each page is a separate HTML file with SWF embedded.<br/>Index page is AS2 code.<br/>Page content text is XML file.<br/>&nbsp;&nbsp;A PHP on-line contact form is used.</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#dadapress').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#flexsite').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>My Flex web site</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is Adobe Flex Builder Pro. and ActionScript 3<br/>Index page animation is AS2 code.<br/>Page content text is XML file.<br/>A PHP on-line contact form is used.<br/>&nbsp;&nbsp;CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is XHTML 1.0 Transitional</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#flexsite').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#phpsite').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>My PHP web site</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is PHP & MySQL driven<br/>Page content text is XML file.<br/>A PHP on-line contact form is used.<br/>CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is XHTML 1.0 Transitional</p>';
		html +=		'</div>';
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#phpsite').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	$('#agentdashboard').hover(function(e) {
		var html = '<div id="info">';
		html +=    '<h4>My Agent Dashboard</h4>';
		html +=	   '<img src="images/workCheckPopUp.png" alt="mysql logo" />';
		html +=	   '<p>This project is PHP & MySQL driven<br/>Page content text is XML file.<br/>A PHP on-line contact form is used.<br/>CSS is used to style the project.<br/>&nbsp;&nbsp;HTML coding is XHTML 1.0 Transitional</p>';
		html +=		'</div>'
						
		$('body').append(html).children('#info').hide().slideDown(400);
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
			
	}, function() {
		$('#info').remove();
	});
	
	$('#agentdashboard').mousemove(function(e) {
		$('#info').css('top', e.pageY + 5).css('left', e.pageX + 20);
	});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	var offsetX = 20;
	var offsetY = 10;

		$('#catnap').animate({ "opacity": 1.0 });		
		$('#catnap').hover(function(){
			$(this).stop().animate({ "opacity" : 1});
		}, function() {
			$(this).stop().animate({ "opacity" : 1.0});
		});
	
	$('#catnap').hover(function(e) {
		var href = $(this).attr('href');
		$('<img id="largeImage" src="' + href + '"" />')
		.css('top', e.pageY + offsetY)
		.css('left', e.pageX + offsetX)
		.appendTo('body').hide().fadeIn(400);
	}, function() {
		$('#largeImage').remove();
	});
	
	//$('#catnap').mousemove(function(e) {
	//	$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
	//});

	$('#catnap').mousemove(function(e) {
		$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
	});

});