initDHTMLAPI(); init();

// Global variables
var isCSS, isW3C, isIE4, isNN4;
// initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
    if (document.images) {
        isCSS = (document.body && document.body.style) ? true : false;
        isW3C = (isCSS && document.getElementById) ? true : false;
        isIE4 = (isCSS && document.all) ? true : false;
        isNN4 = (document.layers) ? true : false;
        isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
    }
}
// set event handler to initialize API
window.onload = initDHTMLAPI;

// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name == name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        } else if (isIE4) {
            theObj = document.all(obj);
        } else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
    var theObj = getRawObject(obj);
    if (theObj && isCSS) {
        theObj = theObj.style;
    }
    return theObj;
}

// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0 
            theObj.left = x + units;
            theObj.top = y + units;
        } else if (isNN4) {
            theObj.moveTo(x,y)
        }
    }
}

// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0 
            theObj.left = getObjectLeft(obj) + deltaX + units;
            theObj.top = getObjectTop(obj) + deltaY + units;
        } else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}

function scroolTo(obj, deltaX, deltaY)
{
  var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
		
            // equalize incorrect numeric value type
            var units = (typeof theObj.marginLeft == "string") ? "px" : 0 
            theObj.marginLeft = -deltaX + units;
            theObj.marginTop = -deltaY + units;
			
        } else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}

function scroolBy(obj, deltaX, deltaY)
{
  var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
		
            // equalize incorrect numeric value type
            var units = (typeof theObj.marginLeft == "string") ? "px" : 0 
            theObj.marginLeft = getObjectMarginLeft(obj) + deltaX + units;
            theObj.marginTop = getObjectMarginTop(obj) + deltaY + units;
			
        } else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}

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

// Set the background color of an object
function setBGColor(obj, color) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isNN4) {
            theObj.bgColor = color;
        } else if (isCSS) {
            theObj.backgroundColor = color;
        }
    }
}

// Set the visibility of an object to visible
function show(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "visible";
    }
}

// Set the visibility of an object to hidden
function hide(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "hidden";
    }
}

// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("left");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.left;
    } else if (elem.style) {
        result = elem.style.left;
    } else if (isNN4) {
        result = elem.left;
    }
    return parseInt(result);
}

function getObjectMarginLeft(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("marginLeft");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.marginLeft;
    } else if (elem.style) {
        result = elem.style.marginLeft;
    } else if (isNN4) {
        result = elem.marginLeft;
    }
    return parseInt(result);
}

// Retrieve the y coordinate of a positionable object
function getObjectTop(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("top");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.top;
    } else if (elem.style) {
        result = elem.style.top;
    } else if (isNN4) {
        result = elem.top;
    }
    return parseInt(result);
}

function getObjectMarginTop(obj)  {
}

// Retrieve the rendered width of an element
function getObjectWidth(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetWidth) {
        result = elem.offsetWidth;
    } else if (elem.clip && elem.clip.width) {
        result = elem.clip.width;
    } else if (elem.style && elem.style.pixelWidth) {
        result = elem.style.pixelWidth;
    }
    return parseInt(result);
}

// Retrieve the rendered height of an element
function getObjectHeight(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetHeight) {
        result = elem.offsetHeight;
    } else if (elem.clip && elem.clip.height) {
        result = elem.clip.height;
    } else if (elem.style && elem.style.pixelHeight) {
        result = elem.style.pixelHeight;
    }
    return parseInt(result);
}


// Return the available content width space in browser window
function getInsideWindowWidth() {
    if (window.innerWidth) {
        return window.innerWidth;
    } else if (isIE6CSS) {
        // measure the html element's clientWidth
        return document.body.parentElement.clientWidth
    } else if (document.body && document.body.clientWidth) {
        return document.body.clientWidth;
    }
    return 0;
}
// Return the available content height space in browser window
function getInsideWindowHeight() {
    if (window.innerHeight) {
        return window.innerHeight;
    } else if (isIE6CSS) {
        // measure the html element's clientHeight
        return document.body.parentElement.clientHeight
    } else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}

// Global holds reference to selected element
var selectedObj;
// Globals hold location of click relative to element
var offsetX, offsetY;

table = document.getElementById('store_menu');

// Set global reference to element being engaged and dragged
function setSelectedElem(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    var divID = (target.name && target.src) ? target.name + "er" : "";
    if (divID) {
        if (document.layers) {
            selectedObj = document.layers[divID];
        } else if (document.all) {
            selectedObj = document.all(divID);
        } else if (document.getElementById) {
            selectedObj = document.getElementById(divID);
        }
        setZIndex(selectedObj, 100);
        return;
    }
    selectedObj = null;
    return;
}

function obj(id)
{
	return document.getElementById(id);
}

// Drag an element
function dragIt(evt) {
	var objScroller = obj('scroller');
	var objDocument = obj('store_menu');
	
	var baseWidth = obj('menu_scrolling').clientWidth;
	
	var scrollerWidth = objScroller.clientWidth;	
	var scrollbarWidth = baseWidth - scrollerWidth;
	var documentWidth = 225 * count;
	
	var deviation = (documentWidth - baseWidth) >= 0 ? documentWidth - baseWidth : 0;
	var coefficient = (deviation + 51)/scrollbarWidth; 
    evt = (evt) ? evt : event;
    if (selectedObj) {
        if (evt.pageX) {
		var step = evt.pageX - offsetX;
		var menustep = step*coefficient - 51;
			if (step <= 0) 
			{
				shiftTo(selectedObj, 1, 0);
			}
			else if (step > scrollbarWidth) 
			{
				shiftTo(selectedObj, scrollbarWidth, 0);
				if (menustep > deviation) scroolTo('store_menu', deviation, 0);
				else scroolTo('store_menu', menustep, 0);
			}
           else if (step > 1 && (evt.pageX - offsetX) < scrollbarWidth)
			{		
				shiftTo(selectedObj, (evt.pageX - offsetX), 0);
				if (menustep > deviation) scroolTo('store_menu', deviation, 0);
				else scroolTo('store_menu', menustep, 0);
			}
        } else if (evt.clientX || evt.clientY) {
			var step = evt.clientX - offsetX;
			var menustep = step*coefficient - 51;
			if (step < 1) 
			{
				shiftTo(selectedObj, 1, 0);
			}
			else if (step > scrollbarWidth) 
			{
				shiftTo(selectedObj, scrollbarWidth, 0);
			}
			else {
				shiftTo(selectedObj, step, 0);
			if (menustep > deviation) scroolTo('store_menu',deviation, 0);
				else scroolTo('store_menu', menustep, 0);
			}
        }
        evt.cancelBubble = true;
        return false;
    }
}
// Turn selected element on
function engage(evt) {
    evt = (evt) ? evt : event;
    setSelectedElem(evt);
    if (selectedObj) {
        if (evt.pageX) {
            offsetX = evt.pageX - ((selectedObj.offsetLeft) ? 
                      selectedObj.offsetLeft : selectedObj.left);
            offsetY = evt.pageY - ((selectedObj.offsetTop) ? 
                      selectedObj.offsetTop : selectedObj.top);
					  
        } else if (evt.offsetX || evt.offsetY) {
            offsetX = evt.offsetX - ((evt.offsetX < -2) ? 
                      0 : document.body.scrollLeft);
            offsetY = evt.offsetY - ((evt.offsetY < -2) ? 
                      0 : document.body.scrollTop);
			offsetX = offsetX + 71;
        } else if (evt.clientX) {
            offsetX = evt.clientX - ((selectedObj.offsetLeft) ? 
                      selectedObj.offsetLeft : 0);
            offsetY = evt.clientY - ((selectedObj.offsetTop) ? 
                      selectedObj.offsetTop : 0);
        }
        return false;
    }
}
// Turn selected element off
function release(evt) {
    if (selectedObj) {
        setZIndex(selectedObj, 0);
        selectedObj = null;
    }
}

// Set event capture for Navigator 4
function setNSEventCapture() {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
// Assign event handlers used by both Navigator and IE
function init() {
    if (document.layers) {
        setNSEventCapture();
    }
    document.onmousedown = engage;
   document.onmousemove = dragIt;
    document.onmouseup = release;
}