/*****************************************
    Browser sniff
*****************************************/

var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;

if (ns4) {
	domObj = "layers.";
	styleObj = "";
} else {
	domObj = "all.";
	styleObj = ".style";
}

/*****************************************
    DHTMLapi
*****************************************/

// Convert an object name string or object reference
// into a valid object reference
function getObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (ns6) {
	    theObj = document.getElementById(obj).style;
	} else {
	    theObj = eval("window.document." + domObj + obj + styleObj);
	}
    } else {
        theObj = obj;
    }

    return theObj;
}

function showLayer(thisDiv) {
    var theObj = getObject(thisDiv);
    theObj.visibility = "visible";
}

function hideLayer(thisDiv) {
    var theObj = getObject(thisDiv);
    theObj.visibility = "hidden";
}

// Positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
	var theObj = getObject(obj);
	if (ns4) {
		theObj.moveTo (x,y);
	} else if (ns6) {
		theObj.left = x + "px";
		theObj.top = y + "px";
	} else {
		theObj.pixelLeft = x;
		theObj.pixelTop = y;
	}
}

// Moving an object by x and / or y pixels
function shiftBy(obj, deltaX, deltaY) {
	var theObj = getObject(obj);
	
	theObj.pixelLeft += x;
	theObj.pixelTop += y;
}

// 	Setting the z-order of an object
function setZIndex (obj, zOrder) {
	var theObj = getObject(obj);
	theObj.zIndex = zOrder;
}

// Setting the background color of an object
function setBGColor (obj, color) {
	var theObj = getObject(obj);
	theObj.backgroundColor = color;
}

function trimPx( numberPx ) {
	number = numberPx.replace( /px/, "" );
	return Number(number);
}

// Retrieving the x coordinate of a positionable object
function getObjectLeft (obj) {
	var theObj = getObject(obj);
	if (ns4) {
		return theObj.left;
	} else {
		return trimPx( theObj.left );
	}
}

// Retrieving the y coordinate of a positionable object
function getObjectTop (obj) {
	var theObj = getObject(obj);
	if (ns4) {
		return theObj.top;
	} else {
		return trimPx( theObj.top );
	}
}

function getCanvasWidth() {
        if (ns4 || ns6 ) {
	        return window.innerWidth;
	} else {
	        return document.body.clientWidth;
	}
}

function getCanvasHeight() {
        if (ns4 || ns6 ) {
	        return window.innerHeight;
	} else {
	        return document.body.clientHeight;
	}
}

// Swap the source of an image
function imageSwap(imgName, imgSource) {
	imgObj = eval(imgName);
	imgObj.src = imgSource;
	return true;
}

// Swap the source of an image nested in a div
// for Netscape 4 compatibility
function divImageSwap(divName, imgName, imgSource) {
	var adjustedImageName;
	if (ns4) {
		adjustedImageName = "document.layers." + divName + ".document.images." + imgName;
	} else {
		adjustedImageName = "document.images." + imgName;
	}
	
	imageSwap( adjustedImageName, imgSource );
}

/*****************************************
    Buffalino functions
*****************************************/

// Image swap wrappers for backwords compatibility
// Oddly, these both do exactly the same thing
function imgAct(divName,imgName,imgSrc) {
	divImageSwap(divName, imgName, eval(imgSrc + ".src") );
}

function imgInact(divName,imgName,imgSrc) {
	divImageSwap(divName, imgName, eval(imgSrc + ".src") );
}

/*** Buffalino functions ***/

//Define shoe variables
var currPos = 1; //was 1
//For every shoe you add, increase this by 1
var finalPos = 3; //was 8

function shiftRight() {
	var prevPos = currPos;
	if (currPos < finalPos) {
		currPos++;
		hideLayer('panel'+prevPos);
		showLayer('panel'+currPos);
	} else {
		alert("You are at the end of the shoe list.");
	}
}

function shiftLeft() {
	var prevPos = currPos;
	if (currPos > 1) {
		currPos--;
		hideLayer('panel'+prevPos);
		showLayer('panel'+currPos);
	} else {
		alert("You are at the beginning of the list.");
	}
}

/*****************************************
    Shoe templating functions
*****************************************/

function ShoeColor() {
        this.image = "";
	this.imgObj = new Image();
}

ShoeColor.prototype.setImage = function (newImage) {
	this.image = newImage;
	this.imgObj.src = this.image;
}

//Deactivate all info
function hideAll() {
        for( i=0; i < shoecolors.length; i++ ) {
	        hideLayer('desc' + i);
	}
}

function switchView( newViewImg ) {
        imgAct('shoe1','views',newViewImg);
}

function switchShoeColor( index ) {
        divImageSwap('shoe0', 'colors', shoecolors[index].imgObj.src );
	hideAll();
	showLayer('desc' + index);
}

onLoad = true;
isPaneled = false;
function centerLayers() {
       // first, center the background
       var x = ( getCanvasWidth() - 640 ) / 2;
       var y = ( getCanvasHeight() - 480 ) /2;

       if ( x < 0 ) { x = 0; }
       if ( y < 0 ) { y = 0; }

       pagex = Math.round(x);
       pagey = Math.round(y);

       shiftTo('backgroundImg', pagex, pagey );

       setRelativeTo('backgroundImg', 'layoutTable', 0, 0 );
       setRelativeTo('backgroundImg', 'shoe0', 25, 126 );
       setRelativeTo('backgroundImg', 'shoe1', 220, 37 );

	if( isPaneled ) {
		for( i=1; i < 4; i++ ) {
			setRelativeTo('backgroundImg', 'panel' + i, 69, 419 );
		}
	}	
	
	for ( i=0; i < shoecolors.length; i++ ) {
		setRelativeTo('backgroundImg', 'desc' + i, 310, 304 );
	}
	
	//show layers if the page just loaded
	if (onLoad) { showLayers();onLoad=false; }
}

defaultShoeColor = 0;
function showLayers() {
	showLayer('backgroundImg');
	showLayer('layoutTable');
	showLayer('shoe0');
	showLayer('shoe1');

	if( isPaneled ) {
		showLayer('panel1');
	}	
	
	switchShoeColor(defaultShoeColor);
}

function setRelativeTo( anchor, obj, x, y ) {
        anchorX = getObjectLeft( anchor );
	anchorY = getObjectTop( anchor );
	x = x + anchorX;
	y = y + anchorY;
	shiftTo( obj, x, y );
}