/*

	<!--div id="tabspot"></div>
	
	
	<ul id="tabs">
		<li>
			<a href="#">Description</a>
			<p>This is the description</p>
		</li>
		
		<li>
			<a href="#">My Super Tab</a>
			<p>This is the description</p>
		</li>
		<li>
			<a href="#">Reviews</a>
			<p>This is the reviews</p>
		</li>
	</ul--->

	function Tab (tabset) 
	{ 
	
		this.tabset = tabset;
		
		// create the 4 td's that make each tab.
		this.td 		= new Object();
		this.td.left 	= document.createElement('td');
		this.td.center 	= document.createElement('td');
		this.td.right 	= document.createElement('td');
		this.td.spacer 	= document.createElement('td');
		
		this.title 		= null;
		this.content	= null;
		this.selected	= null;
		
		this.div = document.createElement('DIV');
		
		this.getContentDiv = function () 
		{	
			var visible = ((this.selected) ? '' : 'none');
			return $(this.div)
						.html(this.content)
						.attr('style', 'display:' + visible);
		};
		
		this.clickTab = function() 
		{ 
			this.parent.selected = true;
			this.parent.div.style.display = '';

			this.parent.tabset.selected.selected = false;
			this.parent.tabset.selected.getContentDiv();
			this.parent.tabset.selected = $(this.parent.div);
			

			//console.debug(this.parent.tabset.selected.getContentDiv);
			//this.parent.tabset.selected.div.style.display = 'none';
			//this.parent.tabset.selected = this.parent.div;
		};
		
		
		this.getElements = function () 
		{
			// create spacer iamge, damm you IE!!
			var spacer 	= document.createElement('IMG');
			$(spacer).attr('src', spacerUrl);
			$(spacer).attr('width', ($.browser.msie) ? 5 : 7);
			
			var arrow = document.createElement('IMG');
			$(arrow).attr('style', 'margin-left: 4px;');
			$(arrow).attr('src', imgPath + ((this.selected) ? 'img_arrow-active.jpg' : 'img_arrow-inactive.jpg'));

			// left border cell
			$(this.td.left).append($(spacer).clone());
			$(this.td.left).attr('background', imgPath + ((this.selected) ? 'img_left-active.jpg' : 'img_left-inactive.jpg'));
			
			// center tab
			$(this.td.center).html(this.title);
			$(this.td.center).append($(arrow));
			$(this.td.center).attr('background', imgPath + ((this.selected) ? 'img_active-tile.jpg' : 'img_inactive-tile.jpg'));
			$(this.td.center).attr('nowrap', 'nowrap');
			$(this.td.center).attr('style', 'padding: 0 10px; cursor:pointer;');
			
			// set the onclick and also set the div to display
			$(this.td.center).click(this.clickTab);
			this.td.center.parent = this;
			
			// right border cell
			$(this.td.right).attr('background', imgPath + ((this.selected) ? 'img_right-active.jpg' : 'img_right-inactive.jpg'));
			$(this.td.right).attr('height', 32);
			$(this.td.right).append($(spacer).clone());
			
			
			// spacer cell
			$(this.td.spacer).html('&nbsp;&nbsp;');
			$(this.td.spacer).attr('background', imgPath + 'img_space.jpg');
			
			return this.td;
		}
		
	};
	
	
	
	
	
	function TabSet(ulId, targetId) 
	{
		this.tabs 		= []
		this.selected 	= null;

		
		this.addTab = function (tab) 
		{
			this.tabs[this.tabs.length] = tab
		};
		
		
		this.drawTabs = function (targetId) 
		{
			var tbl = document.createElement('TABLE');
			var tr  = document.createElement('TR');
			
			var content = document.createElement('DIV');
			$(content).attr('style', 'border: solid 1px #d4d4d4; border-top:none; padding: 10px;');
			
			
			// loop through tabs and add them to the tr
			for (var tab in this.tabs) 
			{
				// get the tab obj and related td objects
				tabObj = this.tabs[tab];
				tabElements = tabObj.getElements();
				
				// put tab content into content div
				$(content).append(tabObj.getContentDiv());
				
				// loop thorough the tds that make the tab
				for (var otd in tabElements) {
					$(tr).append(tabElements[otd])
				}
			}
			
			
			// add the full width td to end of table
			var full_td = document.createElement('TD');
			$(full_td).attr('width', '100%');
			$(full_td).attr('style', 'border-bottom: solid 1px #d4d4d4;');
			$(full_td).html('&nbsp;');
			$(tr).append(full_td);
			
			// set table look and add row to table
			$(tbl).attr('border', '0');
			$(tbl).attr('cellspacing', '0');
			$(tbl).attr('cellpadding', '0');
			$(tbl).append(tr);
			
			
			// render table
			$(targetId).append(tbl);
			$(targetId).append(content);
		}
		
	}
		
	function createTabs(ulId, targetId) 
	{
		var tabset = new TabSet();
		document.tabset = tabset;
		
		// loop through the li and cerate tab objects
		$(ulId).find('li').each(function(i) 
		{
			tabHeader  = $(this).find('a').text();
			tabContent = $(this).find('p').html();
   			
   			// create a tab object.
   			tab 			= new Tab(tabset);
   			tab.title 		= tabHeader;
   			tab.content 	= tabContent;
   			tab.selected 	= (this.selected == null && i == 0) ? true : false;
			
			if (tab.selected) {
				tabset.selected = tab;
			}

   			// add the new tab object to tabset
   			tabset.addTab(tab);

		});
		
		// draw the tabs
		tabset.drawTabs(targetId);
		
		// hide the ul
		$(ulId).hide();
		
		
	}
	
	
	*/
	
	/** DAMMIT> 11th hour shonk, i dont have the time to do it properly!! this is pure kludge! */
	
	var selectedTab =null;
	//var imgPath 	= '/images/pictures/large/buttons/tabs/';
	//var spacerUrl 	= '/images/spacer.gif';
	
	
	$(document).ready(function() {
		
		selectedTab = $('#description');
		
		if (getCookie('tab')) {
			switchTab(getCookie('tab'));
		}
		//createTabs('#tabs', '#tabspot');
		
	});
	
	function d(x) { console.debug(x); }
	
	function switchTab(id) {

		// set the tab to inactive..
		var tab = $('#' + $(selectedTab).attr('id') + 'Tab');
		tab.attr('background', imgPath + 'tabs/img_inactive-tile.jpg');

		var leftbg = $(tab.parent().children()[tab.attr('cellIndex')-1]);
		leftbg.attr('background', imgPath + 'tabs/img_left-inactive.jpg');
		
		var rightbg = $(tab.parent().children()[tab.attr('cellIndex')+1]);
		rightbg.attr('background', imgPath + 'tabs/img_right-inactive.jpg');
		
		selectedTab.hide();
		
		tabContent = selectedTab = $('#' + id);
		tabContent.show();	
		
		// set the tab to active
		var tab = $('#' + $(selectedTab).attr('id') + 'Tab');
		tab.attr('background', imgPath + 'tabs/img_active-tile.jpg');
		var leftbg = $(tab.parent().children()[tab.attr('cellIndex')-1]);
		leftbg.attr('background', imgPath + 'tabs/img_left-active.jpg');
		
		var rightbg = $(tab.parent().children()[tab.attr('cellIndex')+1]);
		rightbg.attr('background', imgPath + 'tabs/img_right-active.jpg');
		
		setCookie('tab', id);
	}
	
	
	
	
	
	
	
	
	
	
	
	function setCookie(c_name,value,expiredays)
	{
		var exdate=new Date();
		exdate.setDate(exdate.getDate()+expiredays);
		document.cookie=c_name+ "=" +escape(value)+
		((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
	}
	
	function getCookie(c_name)
	{
		if (document.cookie.length>0)
		  {
		  c_start=document.cookie.indexOf(c_name + "=");
		  if (c_start!=-1)
		    {
		    c_start=c_start + c_name.length+1;
		    c_end=document.cookie.indexOf(";",c_start);
		    if (c_end==-1) c_end=document.cookie.length;
		    return unescape(document.cookie.substring(c_start,c_end));
		    }
		  }
		return "";
	}