hardwareObj = function(){};
softwareObj = function(){};

var div = document.createElement('div');
var h3 = document.createElement('h3');
var p = document.createElement('p');
var a = document.createElement('a');
var img = document.createElement('img');
var ul = document.createElement('ul');
var li = document.createElement('li');
var span = document.createElement('span');


 
var Drawer = {
	results : Object,
	drawerDiv : Object,
	drawerXML : Object,
	highestIndex : 601,
	edgeOverlap : parseInt(5),
	sections : new Array('Challenges','Hardware','Software','Tricks'),
	challengesDiv : div.cloneNode(true),
	hardwareDiv : div.cloneNode(true),
	softwareDiv : div.cloneNode(true),
	tricksDiv : div.cloneNode(true),
	challengesHeader : h3.cloneNode(true),
	hardwareHeader : h3.cloneNode(true),
	softwareHeader : h3.cloneNode(true),
	tricksHeader : h3.cloneNode(true),
	hardwareClickSpan : span.cloneNode(true),
	softwareClickSpan : span.cloneNode(true),
	tricksClickSpan : span.cloneNode(true),
	hardwareClickAnchor : a.cloneNode(true),
	softwareClickAnchor : a.cloneNode(true),
	tricksClickAnchor : a.cloneNode(true),
	hardwareContentDiv : div.cloneNode(true),
	softwareContentDiv : div.cloneNode(true),
	tricksContentDiv : div.cloneNode(true),
	hardwareToggleDiv : div.cloneNode(true),
	softwareToggleDiv : div.cloneNode(true),
	tricksToggleDiv : div.cloneNode(true),
	hardwareToggleA : a.cloneNode(true),
	softwareToggleA : a.cloneNode(true),
	tricksToggleA : a.cloneNode(true),
	hardwareToggleImg : img.cloneNode(true),
	softwareToggleImg : img.cloneNode(true),
	tricksToggleImg : img.cloneNode(true),
	hardwareOpen : true,
	softwareOpen : true,
	tricksOpen : true,
	lastOpen : Object,
	hardwaregalleryxml : String,
	softwaregalleryxml : String,
	hardwaregalleryid : 'hardwaregallery',
	softwaregalleryid : 'softwaregallery',
	duration: 300,
	step: 30,
	dottedLine: '#B4B7BA',
	hiColor: '#a6a6a6',
	openColor: '#F5F6F6',
	closeColor: '#CED0D1',
	openTextColor: '#000000',
	closeTextColor: '#FFFFFF',
	colorSpeed: 1,
	hexAlphabet: '0123456789ABCDEF',
	drawerStyles: new Array(),
	tricksColumnHeight: 0,
	
	init : function(xmlfile,drawer) {
		this.drawerDiv = new HTMLObject($(drawer));
		AppleJAX.getXMLwithResults(xmlfile,function(results) {
			Drawer.displayHTML(results);
		});
		
	},
	
	toggleImgCloseLight : function() {return /*Drawer.drawerXML.getAttribute('toggleimgcloselight')*/'http://images.apple.com/euro/main/js/pro/images/triangleopenedwhite20060321.png';},
	toggleImgCloseDark : function() {return /*Drawer.drawerXML.getAttribute('toggleimgclosedark')*/'http://images.apple.com/euro/main/js/pro/images/triangleopenedgray20060321.png';},
	toggleImgOpen: function() {return /*Drawer.drawerXML.getAttribute('toggleimgopen')*/'http://images.apple.com/euro/main/js/pro/images/triangleclosed20060321.png';},
	edgeImg : function() {return /*Drawer.drawerXML.getAttribute('edge')*/'http://images.apple.com/euro/main/js/pro/images/edge20060321_new.png';},
	drawerWidth : function() {return parseInt(/*this.drawerXML.getAttribute('width')*/ 1000);}, // 1004);}, // nat
	drawerHeight : function() {return parseInt(/*this.drawerXML.getAttribute('height')*/220);},//  184);}, // nat
	challengesWidth : function() {
		var challenges = Drawer.drawerXML.getElementsByTagName('challenges')[0];
		return parseInt(challenges.getAttribute('width'));
	},

	displayHTML : function(results) {
		this.results = results;
		this.drawerXML = this.results.getElementsByTagName('drawer')[0];

		var isHardwareGallery = true;
		var isSoftwareGallery = true;
		for(var i=0;i<=this.sections.length;i++) {
			this.displaySection(this.sections[i]);
			this.styleSection(this.sections[i]);
			
			//is this section Gallery or Text?
			var sectionXMLContent = "";
			if(this.sections[i])
			{
				sectionXMLContent = this.getSection(this.sections[i]);
				var nodeCount = sectionXMLContent.childNodes.length;
				var children = sectionXMLContent.childNodes;
				for(var j = 0; j < nodeCount; j++)
				{
					if(children[j].tagName && children[j].tagName.indexOf('gallery') == -1)
					{
						if(this.sections[i] == 'Hardware')
							isHardwareGallery = false;
						else if(this.sections[i] == 'Software')
							isSoftwareGallery = false;
						break;
					}
				}
			}
		}
		this.drawerDiv.appendChild(this.challengesDiv);
		this.drawerDiv.appendChild(this.hardwareDiv);
		this.drawerDiv.appendChild(this.softwareDiv);
		this.drawerDiv.appendChild(this.tricksDiv);
		
		this.drawEdges();
		
		var challengesheight = this.challengesDiv.offsetHeight;
		this.challengesDiv.style.padding = ((this.drawerHeight()-challengesheight)/2)+'px 15px';
		
		var tricksContentDivs = this.tricksContentDiv.getElementsByTagName('div');
		for(var i=0;i<tricksContentDivs.length;i++) {
			var contentDivHeight = tricksContentDivs[i].offsetHeight;
			this.tricksColumnHeight = Math.max(this.tricksColumnHeight, contentDivHeight);
		}
		var tricksContentTop = (this.drawerHeight()-this.tricksColumnHeight)/2;
		for(var i=0;i<tricksContentDivs.length;i++) {
			var column = tricksContentDivs[i];
			column.style.height = this.tricksColumnHeight+'px';
			column.style.top = tricksContentTop+'px';
		}
		
//InitializeHardwareGalleryXML(this.hardwaregalleryxml,this.hardwaregalleryid,this.softwaregalleryxml,this.softwaregalleryid);
		var oHardware = this.drawerXML.getElementsByTagName('hardware')[0];
		var oSoftware = this.drawerXML.getElementsByTagName('software')[0];
		
		// Get Gallery images only if XML section contains Gallery.
		if(isHardwareGallery && isSoftwareGallery)
		{
			hardwareObj = new GalleryObj(this.hardwaregalleryid,oHardware);
			hardwareObj.getGalleryImages(hardwareObj,function(){
				softwareObj = new GalleryObj(Drawer.softwaregalleryid,oSoftware);
				softwareObj.getGalleryImages(softwareObj);
			});
		}
		else if(isHardwareGallery && !isSoftwareGallery)
		{
			hardwareObj = new GalleryObj(this.hardwaregalleryid,oHardware);
			hardwareObj.getGalleryImages(hardwareObj);
		}
		else if(!isHardwareGallery && isSoftwareGallery)
		{
			softwareObj = new GalleryObj(Drawer.softwaregalleryid,oSoftware);
			softwareObj.getGalleryImages(softwareObj);
		}
		
		//hardwareObj.displayHTML();
		//softwareObj.displayHTML();
		
		this.toggleHardware('open');
		this.toggleBGColor();
			
	},

	drawEdges: function() {
		var corner1 = div.cloneNode(true);
		corner1.style.width = (this.drawerWidth()-this.edgeOverlap)+'px';
		corner1.style.height = this.edgeOverlap+'px';
		corner1.style.position = 'absolute';
		corner1.style.top = '0px';
		corner1.style.left = '0px';
		corner1.style.background = 'url('+this.edgeImg()+') top left no-repeat';
		corner1.style.zIndex = this.highestIndex;
		var corner2 = corner1.cloneNode(true);
		corner2.style.width = this.edgeOverlap+'px';
		corner2.style.height = (this.drawerHeight()-this.edgeOverlap)+'px';
		corner2.style.top = '0px';
		corner2.style.left = (this.drawerWidth()-this.edgeOverlap)+'px';
		corner2.style.background = 'url('+this.edgeImg()+') top right no-repeat';
		var corner3 = corner1.cloneNode(true);
		if(Browser.isIE()) {
			corner3.style.top = (this.drawerHeight()-this.edgeOverlap-8)+'px';
		} else {
			corner3.style.top = (this.drawerHeight()-this.edgeOverlap)+'px';
		}
		corner3.style.left = this.edgeOverlap+'px';
		corner3.style.background = 'url('+this.edgeImg()+') bottom right no-repeat';
		var corner4 = corner2.cloneNode(true);
		corner4.style.top = this.edgeOverlap+'px';
		corner4.style.left = '0px';
		corner4.style.background = 'url('+this.edgeImg()+') bottom left no-repeat';
		
		if(browser.isIE == true) {
		//	corner1.style.behavior = 'url(/main/js/iepngfix/iepngfix.htc)';
		//	corner2.style.behavior = 'url(/main/js/iepngfix/iepngfix.htc)';
		//	corner3.style.behavior = 'url(/main/js/iepngfix/iepngfix.htc)';
		//	corner4.style.behavior = 'url(/main/js/iepngfix/iepngfix.htc)';
			this.drawerDiv.style.border = '1px solid '+this.dottedLine;
		} else {
			this.drawerDiv.appendChild(corner1);
			this.drawerDiv.appendChild(corner2);
			this.drawerDiv.appendChild(corner3);
			this.drawerDiv.appendChild(corner4);
		}
	},
/*
	zIndexAnchors: function() {
		var anchors = Drawer.drawerDiv.getElementsByTagName('a');
		for(var i=0;i<anchors.length;i++) {
			anchors[i].style.zIndex = (parseInt(Drawer.highestIndex)+100).toString();
		}	
	},
*/	
	getHeaderWidth: function(section) {
		//return parseInt(this.getSection(section.toLowerCase()).getAttribute('headerwidth'));
		return 80;
	},
	getSection : function(section) {
		return this.drawerXML.getElementsByTagName(section.toLowerCase())[0];;
	},

	displaySection : function(section) {
		var sectionXML;
		if(section != null) 
		{ 
			sectionXML = Drawer.getSection(section); 
			// does XML section contain Gallery or Text?
			var nodeCount = sectionXML.childNodes.length;
			var children = sectionXML.childNodes;
			var isGallery = true;
			for(var i = 0; i < nodeCount; i++)
			{
				if(children[i].tagName && children[i].tagName.indexOf('gallery') == -1)
				{
					isGallery = false;
					break;
				}
			}
		}
		
		switch(section) {
			case 'Challenges':
				this.challengesHeader.innerHTML = sectionXML.getAttribute('headertitle');
				var challengesP = p.cloneNode(true);
				var challengesText = document.createTextNode(sectionXML.firstChild.data);
				challengesP.appendChild(challengesText);
				challengesP.style.width = (this.challengesWidth()-30)+'px';
				this.challengesDiv.appendChild(this.challengesHeader);
				this.challengesDiv.appendChild(challengesP);
				break;
			case 'Hardware':
				this.hardwareHeader.innerHTML = section;
				if(isGallery)
				{
					var hardwaregalleryDiv = div.cloneNode(true);
					hardwaregalleryDiv.setAttribute('id',this.hardwaregalleryid);
					this.hardwareClickSpan.appendChild(this.hardwareHeader);
					this.hardwareClickSpan.appendChild(this.hardwareToggleDiv);
					if(hardwaregalleryDiv)
					{
						this.hardwareContentDiv.appendChild(hardwaregalleryDiv);	
					}
				}
				else
				{
					this.traverseXML(section, sectionXML, null, null, 1);
					this.hardwareClickSpan.appendChild(this.hardwareHeader);
					this.hardwareContentDiv.appendChild(this.hardwareToggleDiv);
					this.hardwareClickSpan.appendChild(this.hardwareToggleDiv);
				}
				// shared assignments for Gallery and Text mode
				this.hardwareClickAnchor.id = 'hardware_toggle';
				this.hardwareClickAnchor.setAttribute('href','#');
				this.hardwareToggleImg.setAttribute('border','0');
				this.hardwareToggleImg.setAttribute('src',this.toggleImgCloseDark());
				addEventToObject(this.hardwareClickAnchor,'onclick',this.processToggle);
				this.hardwareToggleDiv.appendChild(this.hardwareToggleImg);
				this.hardwareClickSpan.appendChild(this.hardwareToggleDiv);
				this.hardwareClickAnchor.appendChild(this.hardwareClickSpan);
				this.hardwareDiv.appendChild(this.hardwareClickAnchor);
				this.hardwareDiv.appendChild(this.hardwareContentDiv);
				break;
			case 'Software':
				this.softwareHeader.innerHTML = section;
				if(isGallery)
				{
					var softwaregalleryDiv = div.cloneNode(true);
					softwaregalleryDiv.setAttribute('id',this.softwaregalleryid);
					this.softwareClickSpan.appendChild(this.softwareHeader);
					this.softwareClickSpan.appendChild(this.softwareToggleDiv);
					if(softwaregalleryDiv)
					{
						this.softwareContentDiv.appendChild(softwaregalleryDiv);	
					}
				}
				else
				{
					this.traverseXML(section, sectionXML, null, null, 1);
					this.softwareClickSpan.appendChild(this.softwareHeader);
					this.softwareContentDiv.appendChild(this.softwareToggleDiv);
					this.softwareClickSpan.appendChild(this.softwareToggleDiv);
				}
				//shared assignments for Gallery and Text mode
				this.softwareClickAnchor.id = 'software_toggle';
				this.softwareClickAnchor.setAttribute('href','#');
				this.softwareToggleImg.setAttribute('border','0');
				this.softwareToggleImg.setAttribute('src',this.toggleImgCloseDark());
				addEventToObject(this.softwareClickAnchor,'onclick',this.processToggle);
				this.softwareToggleDiv.appendChild(this.softwareToggleImg);
				this.softwareClickSpan.appendChild(this.softwareToggleDiv);
				this.softwareClickAnchor.appendChild(this.softwareClickSpan);
				this.softwareDiv.appendChild(this.softwareClickAnchor);
				this.softwareDiv.appendChild(this.softwareContentDiv);
				break;
			case 'Tricks':
				// assume that Tricks will always contain Text
				this.tricksHeader.innerHTML = section;
				
				// nat XML parsing
					this.traverseXML(section, sectionXML, null, null, 1);
				// end nat

				//nat commented block
				/*
				var columns = sectionXML.getElementsByTagName('column');
				for(var i=0;i<columns.length;i++) {
					var columndiv = div.cloneNode(true);
					columndiv.style.width = ((((this.drawerWidth()-(this.challengesWidth()+this.getHeaderWidth('hardware')+this.getHeaderWidth('software')+this.getHeaderWidth('tricks')))-20)/columns.length)-5)+'px';

					//(((((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('software'))-this.getHeaderWidth('tricks'))/columns.length)-5)-10)+'px';
					//columndiv.style.height = (this.drawerHeight()-20)+'px';

					//if(i != (columns.length-1)) {
					//	columndiv.style.marginRight = '5px';
					//}
					columndiv.style.position = 'absolute';
					columndiv.style.top = '10px';
					if(i > 0) {
						columndiv.style.left = ((((((this.drawerWidth()-(this.challengesWidth()+this.getHeaderWidth('hardware')+this.getHeaderWidth('software')+this.getHeaderWidth('tricks')))-20)/columns.length)-5)*i)+(i*5)+10)+'px';
						//(((((((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('software')+this.getHeaderWidth('tricks'))/columns.length)-5)-10)*i)+(10*i))+'px';
					} else {
						columndiv.style.left = '10px';
					}
					//columndiv.style.cssFloat = 'left';
					//columndiv.style.background = 'red';
					if(columns[i].getElementsByTagName('list').length > 0) {
						var lists = columns[i].getElementsByTagName('list');
						for(var j=0;j<lists.length;j++) {
							var listUl = ul.cloneNode(true);
							listUl.style.listStyle = 'disc inside';
							var listitem = lists[j].getElementsByTagName('listitem');
							for(var k=0;k<listitem.length;k++) {
								var listLi = li.cloneNode(true);
								var listLiText = document.createTextNode(listitem[k].firstChild.data);
								listLi.appendChild(listLiText);
								listUl.appendChild(listLi);
							}
							columndiv.appendChild(listUl);
						}
					} else if(columns[i].getElementsByTagName('paragraph').length > 0) {
						var paragraphs = columns[i].getElementsByTagName('paragraph');
						for(var j=0;j<paragraphs.length;j++) {
							var paragraphP = p.cloneNode(true);
							var paragraphPText = document.createTextNode(paragraphs[j].firstChild.data);
							paragraphP.appendChild(paragraphPText);
							columndiv.appendChild(paragraphP);
						}
					}
					this.tricksContentDiv.appendChild(columndiv);
				}
				*/
				//nat commented block

				
/*
				if(sectionXML.getElementsByTagName('paragraph')) {
					var paragraphs = sectionXML.getElementsByTagName('paragraph');
					this.tricksDiv.appendChild(this.tricksHeader);
					var totalPChars = 0;
					for(var i=0;i<paragraphs.length;i++) {
						totalPChars += paragraphs[i].firstChild.data.length;
					}
					var divChars = Math.round(totalPChars/2);
					var div1len = 0;
					for(var i=0;i<paragraphs.length;i++) {
						var paragraphChars = paragraphs[i].firstChild.data;
						if((div1len+paragraphChars.length) < divChars) {
							var paragraphP = p.cloneNode(true);
							var paragraphText = document.createTextNode(paragraphChars);
							paragraphP.appendChild(paragraphText);
							div1.appendChild(paragraphP);
							div1len += paragraphChars.length;
						} else if((div1len < divChars) &&
							((div1len+paragraphChars.length) > divChars)) {
							var addedParagraphChars = divChars-div1len;
							var p1end = paragraphChars.indexOf(' ',addedParagraphChars);
							var paragraphP1 = p.cloneNode(true);
							var paragraphP2 = p.cloneNode(true);
							var p1Text = document.createTextNode(paragraphChars.substring(0,p1end+1));
							var p2Text = document.createTextNode(paragraphChars.substring(p1end));
							paragraphP1.appendChild(p1Text);
							paragraphP2.appendChild(p2Text);
							div1.appendChild(paragraphP1);
							div2.appendChild(paragraphP2);						
							div1len += p1end;
						} else {
							var paragraphP = p.cloneNode(true);
							var paragraphText = document.createTextNode(paragraphChars);
							paragraphP.appendChild(paragraphText);
							div2.appendChild(paragraphP);
						}
					}
				} else if(sectionXML.getElementsByTagName('list')) {
					var list = sectionXML.getElementsByTagName('list');
				}

				this.tricksContentDiv.appendChild(div1);
				this.tricksContentDiv.appendChild(div2);
*/
				
				this.tricksContentDiv.appendChild(this.tricksToggleDiv);
				this.tricksClickSpan.appendChild(this.tricksHeader);
				this.tricksClickSpan.appendChild(this.tricksToggleDiv);
				this.tricksClickAnchor.id = 'tricks_toggle';
				this.tricksClickAnchor.setAttribute('href','#');
				this.tricksToggleImg.setAttribute('border','0');
				this.tricksToggleImg.setAttribute('src',this.toggleImgCloseDark());
				addEventToObject(this.tricksClickAnchor,'onclick',this.processToggle);
				this.tricksToggleDiv.appendChild(this.tricksToggleImg);
				this.tricksClickSpan.appendChild(this.tricksToggleDiv);
				this.tricksClickAnchor.appendChild(this.tricksClickSpan);
				this.tricksDiv.appendChild(this.tricksClickAnchor);
				
				//this.tricksDiv.appendChild(this.tricksHeader);
				this.tricksDiv.appendChild(this.tricksContentDiv);

				//nat test alert
				//alert(this.tricksContentDiv.innerHTML);		
				//end nat test alert

				//this.tricksToggleA.id = 'tricks_toggle';
				//this.tricksToggleA.setAttribute('href','#');
				//this.tricksToggleImg.setAttribute('border','0');
				//this.tricksToggleImg.setAttribute('src',this.toggleImgCloseLight());
				//addEventToObject(this.tricksToggleA,'onclick',this.processToggle);
				//this.tricksClickAnchor = this.tricksToggleA.cloneNode(true);
				//this.tricksClickAnchor.appendChild(this.tricksClickSpan);
				//addEventToObject(this.tricksClickAnchor,'onclick',this.processToggle);
				//this.tricksToggleA.appendChild(this.tricksToggleImg);
				//this.tricksToggleDiv.appendChild(this.tricksToggleA);
				//this.tricksDiv.appendChild(this.tricksClickAnchor);
				break;
			default:
				break;
		}
		return true;
	},

	traverseXML : function(secName, tree, elmAppendTo, parentId, curColumn) {
		var nodeCount = tree.childNodes.length;
		var children = tree.childNodes;
		for(var i = 0; i < nodeCount; i++)
		{
			if(children[i].tagName)
			{
				var className = "";
				var parentLevelMarker = "";
				//check if class attribute is passed in
				if(children[i].getAttribute('class'))
					className += children[i].getAttribute('class');
				
				if(parentId)
					parentLevelMarker += parentId;
				var htmlElm = document.createElement('' + children[i].nodeName  + '');
				// don't add ID, we will not refer to these elements
				// htmlElm.id = parentLevelMarker + "_" + children[i].nodeName + "_Elm_" + i;
				
				// if element is a link, attach it
				var link = "";
				if(children[i].getAttribute('href'))
				{
					link = children[i].getAttribute('href');
					htmlElm.setAttribute('href',link);
				}
				
				// elmAppendTo == null indicates the column level
				if(elmAppendTo == null) 
				{
					var colNumber = "";
					switch(secName) {
						case 'Hardware':
						colNumber = "1";
						break;
						case 'Software':
						colNumber = "2";
						break;
						case 'Tricks':
						colNumber = "3";
						break;
					}
					
					className = className + colNumber + curColumn;
					curColumn++;
				}
				
				// CSS styles are defined using #notation on the page
				if(className.length > 0)
				{
					if(browser.isIE == true)
						htmlElm.className = className;
					else
						htmlElm.setAttribute('class', className);
				}
				
				
				// add text
				if(children[i].firstChild.data)
				{
					var htmlElmText = document.createTextNode(children[i].firstChild.data);
					htmlElm.appendChild(htmlElmText);
				}
				
				
				if(elmAppendTo != null)
				{
					elmAppendTo.appendChild(htmlElm);
				}
				else
				{
					switch(secName) {
						case 'Hardware':
						this.hardwareContentDiv.appendChild(htmlElm);
						break;
						case 'Software':
						this.softwareContentDiv.appendChild(htmlElm);
						break;
						case 'Tricks':
						this.tricksContentDiv.appendChild(htmlElm);
						break;
					}
				}
				
				if(children[i].childNodes.length > 0)
					this.traverseXML(secName, children[i], htmlElm, htmlElm.id, curColumn)
			}
		}
		
	},

	getStyleClass : function(className) {
			var curDocumentPagename = document.location.href.substring(document.location.href.lastIndexOf('/') + 1);
			for(var s = 0; s < document.styleSheets.length; s++)
			{
				if(document.styleSheets[s].href.indexOf(curDocumentPagename) > -1)
				{ 
					for(var r = 0; r < document.styleSheets[s].cssRules.length; r++)
					{
						if(document.styleSheets[s].cssRules[r].selectorText == '.' + className)
						{
							return document.styleSheets[s].cssRules[r];	
						}
					} 
				}
			} 
	},
	
	styleSection : function(section) {
		switch(section) {
			case 'Challenges':
				this.challengesHeader.style.fontSize = '16px';
				this.challengesHeader.style.color = "#000000";
				this.challengesHeader.style.marginBottom = '5px';
				
				//this.challengesDiv.style.padding = '30px 15px';
				this.challengesDiv.style.fontSize = '14px';
				this.challengesDiv.style.color = '#666666';
				this.challengesDiv.style.background = '#EDEEEE';
				this.challengesDiv.style.width = (this.challengesWidth()-30)+'px';
				//this.challengesDiv.style.height = (this.drawerHeight()-60)+'px';
				this.challengesDiv.style.position = 'absolute';
				this.challengesDiv.style.top = '0';
				this.challengesDiv.style.left = '0';
				break;
			case 'Hardware':
				this.hardwareHeader.style.fontSize = '12px';
				this.hardwareHeader.style.margin = '10px 15px';
				this.hardwareHeader.style.color = this.closeTextColor;
				this.hardwareClickAnchor.style.textDecoration = 'none';
					
				this.hardwareDiv.style.color = this.openTextColor;
				this.hardwareDiv.style.background = this.openColor;
				this.hardwareClickSpan.style.borderLeft = '2px dotted '+this.dottedLine;
				this.hardwareDiv.style.position = 'absolute';
				this.hardwareDiv.style.top = '0';
				this.hardwareDiv.style.left = this.challengesWidth()+'px';
				this.hardwareDiv.style.width = (this.drawerWidth()-this.challengesWidth())+'px';
				this.hardwareDiv.style.height = this.drawerHeight()+'px';
				this.hardwareDiv.style.zIndex = '200';
		
				//this.hardwareContentDiv.style.width = ((((this.drawerWidth()/4)*3)-(this.getHeaderWidth('software')+this.getHeaderWidth('tricks')))-this.getHeaderWidth('hardware'))+'px';
				this.hardwareContentDiv.style.width = ((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('software')+this.getHeaderWidth('tricks')))+'px';
				this.hardwareContentDiv.style.position = 'absolute';
				this.hardwareContentDiv.style.top = '0';
				this.hardwareContentDiv.style.left = this.getHeaderWidth('hardware')+'px';
				this.hardwareContentDiv.style.padding = '10px';
				
				this.hardwareToggleDiv.style.position = 'absolute';
				this.hardwareToggleDiv.style.bottom = '10px';
				this.hardwareToggleDiv.style.left = '15px';
				
				this.hardwareToggleImg.style.behavior = 'url(http://apple.com/main/js/iepngfix/iepngfix.htc)'; //'url(/main/js/iepngfix/iepngfix.htc)';
				
				this.hardwareClickSpan.style.background = this.closeColor;
				this.hardwareClickSpan.style.height = this.drawerHeight()+'px';
				this.hardwareClickSpan.style.width = this.getHeaderWidth('hardware')+'px';
				this.hardwareClickSpan.style.position = 'absolute';
				this.hardwareClickSpan.style.top = '0';
				this.hardwareClickSpan.style.left = '0';
				break;
			case 'Software':
				this.softwareHeader.style.fontSize = '12px';
				this.softwareHeader.style.margin = '10px 15px';
				this.softwareHeader.style.color = this.closeTextColor;
				this.softwareClickAnchor.style.textDecoration = 'none';
				
				this.softwareDiv.style.color = this.openTextColor;
				this.softwareDiv.style.background = this.openColor;
				this.softwareClickSpan.style.borderLeft = '2px dotted '+this.dottedLine;
				this.softwareDiv.style.position = 'absolute';
				this.softwareDiv.style.top = '0';
				this.softwareDiv.style.left = ((this.drawerWidth()/4)+this.getHeaderWidth('hardware'))+'px';
				this.softwareDiv.style.width = (this.drawerWidth()-this.challengesWidth())+'px';
				this.softwareDiv.style.height = this.drawerHeight()+'px';
				this.softwareDiv.style.zIndex = '400';
		
				//this.softwareContentDiv.style.width = (((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('tricks')))-this.getHeaderWidth('software'))+'px';
				this.softwareContentDiv.style.width = ((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('software')+this.getHeaderWidth('tricks')))+'px';
				this.softwareContentDiv.style.position = 'absolute';
				this.softwareContentDiv.style.top = '0';
				this.softwareContentDiv.style.left = this.getHeaderWidth('software')+'px';
				this.softwareContentDiv.style.padding = '10px';
		
				this.softwareToggleDiv.style.position = 'absolute';
				this.softwareToggleDiv.style.bottom = '10px';
				this.softwareToggleDiv.style.left = '15px';
				
				this.softwareToggleImg.style.behavior =  'url(http://apple.com/main/js/iepngfix/iepngfix.htc)'; //'url(/main/js/iepngfix/iepngfix.htc)';
				
				this.softwareClickSpan.style.background = this.closeColor;
				this.softwareClickSpan.style.height = this.drawerHeight()+'px';
				this.softwareClickSpan.style.width = this.getHeaderWidth('software')+'px';
				this.softwareClickSpan.style.position = 'absolute';
				this.softwareClickSpan.style.top = '0';
				this.softwareClickSpan.style.left = '0';
				break;
			case 'Tricks':
				this.tricksHeader.style.fontSize = '12px';
				this.tricksHeader.style.margin = '10px 15px';
				this.tricksHeader.style.color = this.closeTextColor;
				this.tricksClickAnchor.style.textDecoration = 'none';
				
				this.tricksDiv.style.color = this.openTextColor;
				this.tricksDiv.style.background = this.openColor;
				this.tricksClickSpan.style.borderLeft = '2px dotted '+this.dottedLine;
				this.tricksDiv.style.position = 'absolute';
				this.tricksDiv.style.top = '0';
				this.tricksDiv.style.left = ((this.drawerWidth()/4)+this.getHeaderWidth('hardware')+this.getHeaderWidth('software'))+'px';
				this.tricksDiv.style.width = (this.drawerWidth()-this.challengesWidth())+'px';
				this.tricksDiv.style.height = this.drawerHeight()+'px';
				this.tricksDiv.style.zIndex = '600';
		
				this.tricksContentDiv.style.width = (((this.drawerWidth()-this.challengesWidth())-(this.getHeaderWidth('hardware')+this.getHeaderWidth('software')))-this.getHeaderWidth('tricks'))+'px';
				this.tricksContentDiv.style.position = 'absolute';
				this.tricksContentDiv.style.top = '0';
				this.tricksContentDiv.style.left = this.getHeaderWidth('tricks')+'px';
				this.tricksContentDiv.style.padding = '10px';

				this.tricksToggleDiv.style.position = 'absolute';
				this.tricksToggleDiv.style.bottom = '10px';
				this.tricksToggleDiv.style.left = '15px';
				
				this.tricksToggleImg.style.behavior = 'url(http://apple.com/main/js/iepngfix/iepngfix.htc)'; //'url(/main/js/iepngfix/iepngfix.htc)';
				
				this.tricksClickSpan.style.background = this.closeColor;
				this.tricksClickSpan.style.height = this.drawerHeight()+'px';
				this.tricksClickSpan.style.width = this.getHeaderWidth('tricks')+'px';
				this.tricksClickSpan.style.position = 'absolute';
				this.tricksClickSpan.style.top = '0';
				this.tricksClickSpan.style.left = '0';
				break;
			default:
				this.drawerDiv.style.width = this.drawerWidth()+'px';
				this.drawerDiv.style.height = this.drawerHeight()+'px';
				this.drawerDiv.style.position = 'relative';
				this.drawerDiv.style.overflow = 'hidden';
				this.drawerDiv.style.fontSize = '10px';
				this.drawerDiv.style.background = '#EDEEEE';
				break;
		}
		return true;
	},
	processToggle : function(ev) {
		if(!ev) {ev = window.event;}
		if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; }
		if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; }
		var clickedLink = (window.event) ? window.event.srcElement : ev.target;
		while (!clickedLink.tagName || clickedLink.tagName.toLowerCase() != "a") {
			clickedLink = clickedLink.parentNode;
		}
		var	toggleDiv = clickedLink.id.split('_')[0];
		if(Drawer.lastOpen != clickedLink.parentNode) {
			switch(toggleDiv) {
				case 'tricks':
					Drawer.toggleTricks('open');
					break;
				case 'software':
					Drawer.toggleSoftware('open');
					break;
				case 'hardware':
					Drawer.toggleHardware('open');
					break;
				default:
					break;
			}
			Drawer.toggleBGColor();
		}
	},
	toggleHardware : function(direction) {
		switch(direction) {
			case 'open':
				if(Drawer.tricksOpen) {Drawer.toggleTricks('close');}
				if(Drawer.softwareOpen) {Drawer.toggleSoftware('close');}
				Drawer.hardwareToggleImg.setAttribute('src',Drawer.toggleImgCloseDark());
				Drawer.hardwareOpen = true;
				break;
			case 'close': 
				Drawer.hardwareToggleImg.setAttribute('src',Drawer.toggleImgCloseLight());
				Drawer.hardwareOpen = false;
				break;
			default:
				break;
		}
	},
	toggleSoftware : function(direction) {
		var startLeft = (Drawer.challengesWidth()+Drawer.getHeaderWidth('hardware'));
		var endLeft = (Drawer.drawerWidth()-(Drawer.getHeaderWidth('tricks')+Drawer.getHeaderWidth('software')));
		switch(direction) {
			case 'open':
				if(!Drawer.softwareOpen) {
					Drawer.moveSection(Drawer.softwareDiv,endLeft,startLeft,
						Drawer.duration,Drawer.step,
						function(){
							Drawer.softwareToggleImg.setAttribute('src',Drawer.toggleImgCloseLight());
						});
				}
				if(Drawer.hardwareOpen) {Drawer.toggleHardware('close');}
				if(Drawer.tricksOpen) {Drawer.toggleTricks('close');}
				Drawer.softwareOpen = true;
				break;
			case 'close':
				if(Drawer.softwareOpen) {
					Drawer.moveSection(Drawer.softwareDiv,startLeft,endLeft,
						Drawer.duration,Drawer.step,
						function(){
							Drawer.softwareToggleImg.setAttribute('src',Drawer.toggleImgOpen());
						});
				}
				Drawer.softwareOpen = false;
				break;
			default:
				break;
		}
	},
	toggleTricks : function(direction) {
		var startLeft = (Drawer.challengesWidth()+Drawer.getHeaderWidth('hardware')+Drawer.getHeaderWidth('software'));
		var endLeft = (Drawer.drawerWidth()-Drawer.getHeaderWidth('tricks'));
		switch(direction) {
			case 'open':
				if(!Drawer.softwareOpen) {Drawer.toggleSoftware('open');}
				Drawer.moveSection(Drawer.tricksDiv,endLeft,startLeft,
					Drawer.duration,Drawer.step,
					function(){
						Drawer.tricksToggleImg.setAttribute('src',Drawer.toggleImgCloseLight());
						if(Drawer.softwareOpen) {
							Drawer.softwareToggleImg.setAttribute('src',
								Drawer.toggleImgCloseLight());
						}
					});
				Drawer.tricksOpen = true;
				if(Drawer.hardwareOpen) {Drawer.toggleHardware('close');}
				break;
			case 'close':
				Drawer.moveSection(Drawer.tricksDiv,startLeft,endLeft,Drawer.duration,Drawer.step,
					function(){
						Drawer.tricksToggleImg.setAttribute('src',Drawer.toggleImgOpen());
						Drawer.softwareToggleImg.setAttribute('src',Drawer.toggleImgCloseLight());
					});
				Drawer.tricksOpen = false;
				break;
			default:
				break;
		}
/*		
		if(Drawer.tricksOpen) {
			Drawer.moveSection(Drawer.tricksDiv,startLeft,endLeft,Drawer.duration,Drawer.step,
				function(){
					Drawer.tricksToggleImg.setAttribute('src',Drawer.toggleImgOpen());
					Drawer.softwareToggleImg.setAttribute('src',Drawer.toggleImgCloseDark());
				});
			Drawer.tricksOpen = false;
			Drawer.toggleHardware();
		} else {
			if(!Drawer.softwareOpen) {Drawer.toggleSoftware();}
			Drawer.moveSection(Drawer.tricksDiv,endLeft,startLeft,Drawer.duration,Drawer.step,
				function(){
					Drawer.tricksToggleImg.setAttribute('src',Drawer.toggleImgCloseDark());
					if(Drawer.softwareOpen) {
						Drawer.softwareToggleImg.setAttribute('src',Drawer.toggleImgCloseLight());
					}
				});
			Drawer.tricksOpen = true;
			Drawer.toggleHardware();
		}
*/
	},
	toggleBGColor : function() {
		var openSection = (Drawer.hardwareOpen) ? Drawer.hardwareDiv : ((Drawer.tricksOpen) ? Drawer.tricksDiv : Drawer.softwareDiv);
		if(Drawer.lastOpen.nodeType == 1) {
			var oLastClickSpan = Drawer.lastOpen.getElementsByTagName('span')[0];
			oLastClickSpan.style.background = Drawer.closeColor;
			//oLastClickSpan.getElementsByTagName('h3')[0].style.color = Drawer.closeTextColor;

			//Drawer.lastOpen.style.background = Drawer.closeColor;
			//Drawer.fadeColor(Drawer.lastOpen,Drawer.openColor,Drawer.closeColor,Drawer.colorSpeed,'b');
			
			//Drawer.lastOpen.style.color = Drawer.closeTextColor;			
			//Drawer.fadeColor(Drawer.lastOpen,Drawer.openTextColor,Drawer.closeTextColor,Drawer.colorSpeed,'c');

		}
		var oCurrentClickSpan = openSection.getElementsByTagName('span')[0];
		oCurrentClickSpan.style.background = Drawer.hiColor;
		//oCurrentClickSpan.getElementsByTagName('h3')[0].style.color = Drawer.openTextColor;

		//openSection.style.background = Drawer.openColor;
		//Drawer.fadeColor(openSection,Drawer.closeColor,Drawer.openColor,Drawer.colorSpeed,'b');
		
		//openSection.style.color = Drawer.openTextColor;		
		//Drawer.fadeColor(openSection,Drawer.closeTextColor,Drawer.openTextColor,Drawer.colorSpeen,'c');

		Drawer.lastOpen = openSection;
	},
	moveSection : function(section,startLeft,endLeft,duration,framerate,func) {
		var setLeft = function(l) {section.style.left = l+'px';};
		var step = (duration/1000)*framerate;
		var delta = startLeft;
		var changeLeft = function(newLeft,endLeft) {
			var changeLeftST = null;
			var stepDuration = (duration/step);
			duration -= stepDuration;
			if(newLeft < endLeft) {
				delta = (step > 0) ? (endLeft - newLeft)/step : 0;
				newLeft = Math.max(startLeft, Math.min(newLeft+delta, endLeft));
				if(newLeft > (endLeft-1)) {newLeft = endLeft;}
				setLeft(newLeft);
				changeLeftST = window.setTimeout(function(){changeLeft(newLeft,endLeft);},stepDuration);
			} else if (newLeft > endLeft) {
				delta = (step > 0) ? (newLeft - endLeft)/step : 0;
				newLeft = Math.min(startLeft, Math.max(newLeft-delta, endLeft));
				if(newLeft < (endLeft+1)) {newLeft = endLeft;}
				setLeft(newLeft);
				changeLeftST = window.setTimeout(function(){changeLeft(newLeft,endLeft);},stepDuration);
			} else if (newLeft == endLeft) {
				setLeft(endLeft);
				clearTimeout(changeLeftST);
				if (func) {func();}
			}
		};
		changeLeft(startLeft,endLeft);
	},
	fadeColor : function(div,startColor,endColor,speed,BorC) {
		var hexToNum = function(hex) {
			if(hex.charAt(0) == '#') { hex = hex.slice(1); }
			if(hex.length == 3) { hex += hex;}
			hex = hex.toUpperCase();
			var num = new Array(3);
			var k = 0;
			var int1, int2;
			for(var i=0;i<6;i+=2) {
				int1 = Drawer.hexAlphabet.indexOf(hex.charAt(i));
				int2 = Drawer.hexAlphabet.indexOf(hex.charAt(i+1));
				num[k] = (int1*16)+int2;
				k++;
			}
			return num;
		};
		var numToHex = function(num) {
			var hex = '#';
			var int1, int2;
			for(var i=0;i<3;i++) {
				int1 = num[i]/16;
				int2 = num[i]%16;
				hex += Drawer.hexAlphabet.charAt(int1) + Drawer.hexAlphabet.charAt(int2);
			}
			return hex;
		};
		var changeColorST;
		var changeColor = function(div,startColor,endColor,speed) {
			var startNum = hexToNum(startColor);
			var endNum = hexToNum(endColor);
			for(var i=0;i<3;i++) {
				startNum[i] = Number(startNum[i]);
				endNum[i] = Number(endNum[i]);
			}
			for(var i=0;i<3;i++) {
				if(startNum[i] < endNum[i]) {
					startNum[i] += speed;
					if(startNum[i] > endNum[i]) { startNum[i] = endNum[i]; }
				}
				else if(startNum[i] > endNum[i]) {
					startNum[i] -= speed;
					if(startNum[i] < endNum[i]) { startNum[i] = endNum[i]; }
				}
			}
			var color = 'rgb('+startNum[0]+','+startNum[1]+','+startNum[2]+')';
			if(BorC == 'b') {
				div.style.background = color;
			}
			else if(BorC == 'c') {
				div.style.color = color;
			}
			if((startNum[0] == endNum[0]) &&
				(startNum[1] == endNum[1]) &&
				(startNum[2] == endNum[2])) {
				clearTimeout(changeColorST);
				return;
			}
			startColor = numToHex(startNum);
			changeColorST = window.setTimeout(function(){changeColor(div,startColor,endColor,speed);},10);
		};
		changeColor(div,startColor,endColor,speed);
	}
};