var crossRule;
if (document.styleSheets[0].cssRules)
crossRule=document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules)
crossRule=document.styleSheets[0].rules;

/*var sheet  = document.styleSheets[0];
var crossRule =sheet.cssRules? sheet.cssRules: sheet.rules;*/

var target;
var logoClass;

for (var i=0; i< crossRule.length; i++)
{
	if (crossRule[i].selectorText =="#holder #nav li" || crossRule[i].selectorText =="#holder #nav LI")// 
		{
			target = i;			
		}	
	if (crossRule[i].selectorText=="#abqLogo img" ||crossRule[i].selectorText=="#abqLogo IMG")
		{
			logoClass= i;	
		}
}
///alert("Target's value is : " + target);
///alert("logoClass' value is : " + logoClass);

//var holderMaxWidth = "100%";
var holderMaxWidth = "700px";
var holderMinWidth = "200px";
var holderMaxFloat = "left";
var holderMinFloat = "right";
var holderMaxBorderLeft = "0";
var holderMinBorderLeft = "25px solid white";

var hrMaxBorderBottom = "25px solid white";
var hrMinBorderBottom = "0";

var messageMaxVisibility = "hidden";
var messageMinVisibility = "visible";

var navMaxLineHeight = "60px";
var navMinLineHeight = "30px";

var holderObj;
var	hrObj;
var	messageObj;
var	navObj;

var messageMaxCopy = "Click here to view this site from a bicyclist's point of view.";
var messageMinCopy = "Return to full-screen view.";

function init() {
	holderObj = document.getElementById("holder");
	holderStyleMaxWidth = "maxWidth";
	holderStyleCssFloat = "cssFloat";
	holderStyleStyleFloat = "styleFloat";
	holderStyleBorderLeft = "borderLeft";
	holderObj.style[holderStyleMaxWidth] = holderMaxWidth;
	holderObj.style[holderStyleCssFloat] = holderMaxFloat;
	holderObj.style[holderStyleStyleFloat] = holderMaxFloat;
	holderObj.style[holderStyleBorderLeft] = holderMaxBorderLeft;
	
	navObj = document.getElementById("nav");
	navStyleLineHeight = "lineHeight";
	navObj.style[navStyleLineHeight] = navMaxLineHeight;
	
	hrObj = document.getElementById("hr");
	hrStyleBorderBottom = "borderBottom";
	hrObj.style[hrStyleBorderBottom] = hrMaxBorderBottom;
	
	messageObj = document.getElementById("message");
	messageStyleVisibility = "visibility";
	messageObj.style[messageStyleVisibility] = messageMaxVisibility;
}

function initStyleToggle() {
	var currentMaxWidth = holderObj.style.maxWidth;
	var currentFloat;
	var currentBorderLeft;
	var currentHr;
	var currentMessageVisible; 
	var currentNavLineHeight;
	var currentMessageCopy;
	
	if (currentMaxWidth == holderMaxWidth) {
		currentMaxWidth = holderMinWidth;
		currentFloat = holderMinFloat;
		currentBorderLeft = holderMinBorderLeft;
		currentBorderHr = hrMinBorderBottom;
		currentMessageVisible = messageMinVisibility;
		currentNavLineHeight = navMinLineHeight;
		currentMessageCopy = messageMinCopy;
		crossRule[target].style.cssFloat = "none";
		crossRule[target].style.styleFloat = "none";
		crossRule[target].style.display = "block";
		crossRule[logoClass].style.marginTop = "10px";
		crossRule[logoClass].style.cssFloat = "none";
	} 
	else if (currentMaxWidth == holderMinWidth) {
		currentMaxWidth = holderMaxWidth;
		currentFloat = holderMaxFloat;
		currentBorderLeft = holderMaxBorderLeft;
		currentBorderHr = hrMaxBorderBottom;
		currentMessageVisible = messageMaxVisibility;
		currentNavLineHeight = navMaxLineHeight;
		currentMessageCopy = messageMaxCopy;
		crossRule[target].style.cssFloat = "left";
		crossRule[target].style.styleFloat = "left";
		crossRule[target].style.display = "inline";
		crossRule[logoClass].style.marginTop = "-10px";
		crossRule[logoClass].style.cssFloat = "right";
	}
	
	setStyle(holderObj, holderStyleMaxWidth, currentMaxWidth);
	setStyle(holderObj, holderStyleCssFloat, currentFloat);
	setStyle(holderObj, holderStyleStyleFloat, currentFloat);
	setStyle(holderObj, holderStyleBorderLeft, currentBorderLeft);
	setStyle(navObj, navStyleLineHeight, currentNavLineHeight);
	setStyle(hrObj, hrStyleBorderBottom, currentBorderHr);
	setStyle(messageObj, messageStyleVisibility, currentMessageVisible);
	
	replaceText(currentMessageCopy);
}

function setStyle(obj, objStyle, objValue) {
	obj.style[objStyle] = objValue;
}
		
function replaceText(textReplacement) {
	var id = "toggleView"
	var currentText = "";

	if (currentText.length == 0) {
		currentText = document.getElementById(id).innerHTML;
	}
		
	textReplaced = textReplacement;
	document.getElementById(id).innerHTML = textReplaced;
}


window.onload = init;