<?xml version="1.0" encoding="UTF-8"?>
<Module>
	<ModulePrefs title="Tabs and Buttons">
		<Require feature="tabs"/>
	</ModulePrefs>
	<Content type="html">
		<![CDATA[
			<!-- Initialize all of our entirely unofficial "Orkutizing" stylesheets and javascript -->
			<!-- These files should be used as reference only and not included in production code (please) -->
			<link href="http://graargh.returnstrue.com/ui/orkut.css" type="text/css" rel="stylesheet">
			<link href="http://graargh.returnstrue.com/ui/createButton.css" type="text/css" rel="stylesheet">
			<link href="http://graargh.returnstrue.com/ui/tabs.css" type="text/css" rel="stylesheet">
			<script src="http://graargh.returnstrue.com/ui/createButton.js"></script>
			<script src="http://graargh.returnstrue.com/ui/tabs.js"></script>
			
			<!-- The divs for each of our tabs, and inside, the divs for each of our Orkutized buttons -->
			<div id="one">
				<div id="one_button"></div>
			</div>
			<div id="two">
				<div id="two_button"></div>
			</div>
			<div id="three">
				<div id="three_button"></div>
			</div>
			
			<!-- Our actual demo logic -->
			<script type="text/javascript">
				var tabs;
				
				// Initialize styled tabs, with existing API
				function setupTabs() {
					// Create styled tabs
					tabs = new _IG_Tabs();
					
					// Create each of our tabs, pointing to our created div
					// The <span> inserted in the name creates the left side of the "rounded tab" effect
					// changeLeftImage is a callback that properly changes the <span> to reflect the selected tab coloring
					tabs.addTab('<span class="tablib_extension_left_selected" id="tab_0"></span>One', 'one', changeLeftImage);
					tabs.addTab('<span class="tablib_extension_left_notselected" id="tab_1"></span>Two', 'two', changeLeftImage);
					tabs.addTab('<span class="tablib_extension_left_notselected" id="tab_2"></span>Three', 'three', changeLeftImage);
					
					// Move the tabs left to follow Orkut convention
					tabs.alignTabs('left', 2);
				}
				
				// Call the tab initialization
				setupTabs();
				
				// Create Orkutized buttons in the tabs
				// There are two styles of button, normal (left aligned) buttons, and right floating buttons
				// Creation calls for buttons that can, and should appear on their own line, should be passed the element into which they should be inserted
				// Creation calls for buttons that should appear next to other content, or buttons, should be returned and appended to the innerHTML
				// These calls append the HTML and appear on the same line
				_gel("one_button").innerHTML += createButton('alert!', null, 'alert("alert!");', null, true);
				_gel("one_button").innerHTML += createButton('alert!', null, 'alert("alert!");', null, true);
				_gel("one_button").innerHTML += createButton('load tab two', null, 'tabs.setSelectedTab(1);');
				
				// These calls are inserted into an HTML element
				createButton('load tab three', null, 'tabs.setSelectedTab(2);', "two_button");
				createButton('load tab one', null, 'tabs.setSelectedTab(0);', "three_button");
			</script>
		]]>
	</Content>
</Module>
