// JavaScript Document
<!--
function changeTab(page,tabId)
{
	// SET ALL THE TABS ON THE CORESPONDING PAGE CLOSED
	if(page == "bio")
	{
		document.getElementById("xhtmlcss").style.borderBottomColor = "#CCC";
		document.getElementById("javascript").style.borderBottomColor = "#CCC";
		document.getElementById("phpmysql").style.borderBottomColor = "#CCC";
		document.getElementById("ajax").style.borderBottomColor = "#CCC";
	}
	else if(page == "process")
	{
		document.getElementById("discuss").style.borderBottomColor = "#CCC";
		document.getElementById("sitemaps").style.borderBottomColor = "#CCC";
		document.getElementById("wireframes").style.borderBottomColor = "#CCC";
		document.getElementById("designs").style.borderBottomColor = "#CCC";
		document.getElementById("development").style.borderBottomColor = "#CCC";
		document.getElementById("payment").style.borderBottomColor = "#CCC";
	}
	
	// SET THE CLICKED TAB OPEN
	document.getElementById(tabId).style.borderBottomColor = "#FFF";
	
	// SET THE TABBED CONTENT innerHTML BASED ON THE CLICKED TAB
	//XHTML CSS
	if (tabId == "xhtmlcss")
		document.getElementById("tabbed-content").innerHTML = '<b>XHTML</b> is the newest version of <a href="http://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a> (the core of every website). It makes up the structure and layout of the website. The HTML language is constantly being revised to better suite today&#39;s new technology. XHTML is today&#39;s version. Knowing and using XHTML ensures "<a href="http://www.google.com/search?q=well-formed+xhtml" target="_blank">well-formed</a>" websites.<br /><br /><b>CSS 3</b> is the newest version of <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" target="_blank">CSS</a>. It is so new, in fact, that most web browsers don&#39;t support all of its features. Why use CSS 3 then? Even though most browsers do not support the new features in CSS 3, they still support all the features in CSS 3 that were in CSS 2. This simply means that a website designed with CSS 3 will still look great in a browser that only supports CSS 2, but will look even better for those visitors who have a browser with CSS 3 support.<!--<br /><br />Check this website&#39;s <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mikebradywebsites.com%2Fbio.php" target="_blank" >XHTML Validation</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.mikebradywebsites.com%2Fcss%2Fmain.css&amp;profile=css3" target="_blank" >CSS 3 Validation</a>!-->';
	// JAVASCRIPT
	else if(tabId == "javascript")
		document.getElementById("tabbed-content").innerHTML = '<b>JavaScript</b> makes websites more interactive. With JavaScript you can change elements of a page after the page has already been loaded. JavaScript script adds a whole new element to websites. It allows websites to stand out compared to websites that don&#39;t use it.<br /><br /><b>How JavaScript is used on this site:</b><br />&bull;to create the CoverFlow application. (Credit: <a href="http://www.classycode.co.uk/CoverFlow/rwmCoverFlow%20-%20demo.htm" target="_blank">Raith</a>)<br />&bull;to make the fade effect between testimonials.<br />&bull;to control what text you see in this box.';
	//PHP MYSQL
	else if(tabId == "phpmysql")
		document.getElementById("tabbed-content").innerHTML = '<b>PHP</b> is a powerful <a href="http://en.wikipedia.org/wiki/Server-side_scripting" target="_blank">server-side scripting</a> language that can give your website even more interactivity. When combined with MySQL you can add things like user accounts and an online store.<br /><br /><b>MySQL</b> is a type of database. It can store user account information, product information, statistics, etc. With a MySQL database your website can do more than just give your visitors something to look at.';
	// AJAX
	else if(tabId == "ajax")
		document.getElementById("tabbed-content").innerHTML = '<b>AJAX</b> is a combination of JavaScript and <a href="http://en.wikipedia.org/wiki/Server-side_scripting" target="_blank">server-side scripting</a> that allows your website to do tasks in the same page, that normally require the page to change.<br /><br /><p>The most common example of AJAX is Google Suggest. When you begin to type your search in Google it instantly suggests searches for you. It does this by contacting the server and comparing your search with other popular searches.</p><p>Normally, contacting the server would require loading a new page. AJAX eliminates this need. Other ways AJAX can be implemented is allowing users to login to their account without refreshing or going to a login page.</p>';
	// INITITAL DISCUSSION
	else if(tabId == "discuss")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/paper&amp;pencil_48.png" alt="Initial Discussion" style="float:left;margin-right:12px;" />In the initial discussion we will talk about a lot. This discussion could take anywhere from 15 minutes to an hour. But don&#39;t worry, the longer the better!<br clear="all" /><br /><b>Things that will be discussed:</b><br />&bull;Why you want a website. The main purpose of your website.<br />&bull;The mood and atmosphere you want your website convey.<br />&bull;What brand values do you want your website to convey.<br />&bull;Design ideas:<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;What websites do you like?<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;What websites do you not like?';
	// SITEMAPS
	else if(tabId == "sitemaps")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/sitemap-graphic.png" alt="Sitemap" style="float:left;margin-right:12px;" />After we discuss what you want and a lot more, I will create a sitemap to layout the structure of your website. A site map defines the hierarchy of pages within the site. We will discuss the sitemap and make any necessary changes.<br clear="all" /><br /><center>The site map for this website:<br /><a rel="lightbox" href="images/sitemap.png"><img src="images/sitemap.png" alt="Mike Brady Websites Sitemap" width="50%" class="border" /></a><br /></center>';
	// WIREFRAMES
	else if(tabId == "wireframes")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/Tools.png" alt="Wireframe" style="float:left;margin-right:12px;" />The next step is creating wireframes of each unique page. The purpose of a wireframe is to layout the site. They are very basic drawings that show where each element will go.<br clear="all" /><br /><center>The wireframe for the bio page of this website:<br /><a rel="lightbox" href="images/wireframe-bio.png"><img src="images/wireframe-bio.png" alt="Mike Brady Websites Bio Wireframe" width="50%" class="border" /><br /></center>';
	// FULL DESIGNS
	else if(tabId == "designs")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/brush.png" alt="Full Designs" style="float:left;margin-right:12px;" />After you have approved the wireframes, I will create full designs of each unique page. These designs will reflect how your website will look on the web.<br clear="all" /><br /><center>The full design for the bio page of this website:<br /><a rel="lightbox" href="images/full-design-bio.jpg"><img src="images/full-design-bio.jpg" alt="Mike Brady Websites Bio Full Design" width="50%" class="border" /></a><br /></center>';
	// LIVE DEVELOPMENT
	else if(tabId == "development")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/web.png" alt="Live Development" style="float:left;margin-right:12px;" />At this step your website begins to come to life. This is when I create your website online. You will be able to see how each page works and functions with each other.<br clear="all" />';
	// PAYMENT
	else if(tabId == "payment")
		document.getElementById("tabbed-content").innerHTML = '<img src="images/money-and-coins.png" alt="Payment" style="float:left;margin-right:12px;" />Once you are 100% satisfied with your website it is time to make the payment and for you to receive your website!. Immediately after payment has been received your website will be officially launched.<br clear="all" /><br /><b>Payment Options:</b><br/ >&bull;Cash<br />&bull;Check<br />&bull;PayPal<br /><br /><b>Payment Plans:</b><br />&bull;30% upfront<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;30% is paid after the initial discussion.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;The remaining 70% is paid after the final approval, before launch.<br /><br />&bull;Progressive Payment<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;5% is paid after the initial discussion.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;5% is paid after the sitemap is approved.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;5% is paid after the wireframes are approved.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;5% is paid after the full designs are approved.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&ndash;The remaining 80% is paid after the final apporval, before launch.';
}
-->