var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
var mouseStatus = "up";
var mouseDownTime;
var scrollingBeginTime;
var autoScrolling = false;
var mouseOffset;
var captured = false;
var upEdge;
var downEdge;
var scrollBar;

//Set item alpha filter
function setAlpha( obj , floatValue){
	var percentValue = floatValue * 100;
	obj.style.filter='alpha(opacity='+percentValue+')' ;
	obj.style.MozOpacity = floatValue;
}

//Disable  the up and down arrows
function disableArrows( upArr , downArr ){
	if(upArr.parentNode)
		upArr.parentNode.style.cursor = 'default';
	if(downArr.parentNode)
		downArr.parentNode.style.cursor = 'default';
	upArr.style.cursor = 'default';
	downArr.style.cursor = 'default';
	upArr.onmousedown = null;
	upArr.onmouseup = null;
	downArr.onmousedown = null;
	downArr.onmouseup = null;
	setAlpha( upArr , 0);
	setAlpha( downArr , 0);
}

//enable  the up and down arrows
function enableArrows( upArr , downArr ){
	upArr.style.cursor = 'pointer';
	downArr.style.cursor = 'pointer';
	upArr.onmousedown = handleScrollClick;
	upArr.onmouseup = handleScrollStop;
	downArr.onmousedown = handleScrollClick;
	downArr.onmouseup = handleScrollStop;
	setAlpha( upArr , 1);
	setAlpha( downArr , 1);
}
//Get mouse postion
function mouseCoords(evt){
	if(evt.pageX || evt.pageY){
		return {x:evt.pageX, y:evt.pageY};
	}
	return {
		x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:evt.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

//Get the absolute position of an element in the page
function GetAbsoluteLocationEx(element) 
{ 
    if ( arguments.length != 1 || element == null ) 
    { 
        return null; 
    } 
    var elmt = element; 
    var offsetTop = elmt.offsetTop; 
    var offsetLeft = elmt.offsetLeft; 
    var offsetWidth = elmt.offsetWidth; 
    var offsetHeight = elmt.offsetHeight; 
    
    while( elmt = elmt.offsetParent ) 
    { 
        if ( elmt.style.position == 'absolute') 
        { 
            break; 
        }  
        offsetTop += elmt.offsetTop; 
		offsetLeft += elmt.offsetLeft; 
		
        
    } 
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft, 
        offsetWidth: offsetWidth, offsetHeight: offsetHeight }; 
}

//Get mouse offset position to the target
function getMouseOffset(target, evt){
	evt = evt || window.event;

	var docPos    = GetAbsoluteLocationEx(target);
	var mousePos  = mouseCoords(evt);
	return {x:mousePos.x - docPos.absoluteLeft, y:mousePos.y - docPos.absoluteTop};
}


// 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);
        }
    }
}

// Move an object to x and/or y pixels
function shiftTo(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.top = getObjectTop(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);
}

// 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);
}

// 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;
}

// Second Script Different from previous One Zuhair

var scrollEngaged = false;
var scrollInterval;
var scrollBars = new Array();

function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
    var elem = document.getElementById(elemID);
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleAttr];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleAttr);
    }
    return "";
}


function handleScrollStop() {
	mouseStatus = "up";
	var upTime = new Date();
	if(autoScrolling){
		return false;
	}
	
	if(mouseDownTime==null ||(upTime - mouseDownTime)<2000){
		scrollEngaged = false;
		autoScrolling = false;
	}
	else{
		if(scrollEngaged){
			scrollingBeginTime = new Date();
			autoScrolling = true;
		}
	}
	mouseDownTime=null;
}

function blockEvent(evt) {
    evt = (evt) ? evt : event;
    evt.cancelBubble = true;
    return false;
}

function handleScrollClick(evt) {
	mouseStatus="down";
	mouseDownTime=new Date();

	if(autoScrolling)
		return false;

    var fontSize;
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var index = target.index;
    var offset = (target.className == "lineup") ? -3 : 3;
    fontSize = scrollBars[index].contentFontSize;
    fontSize = (target.className == "lineup") ? fontSize : -fontSize;
    scrollEngaged = true;
    scrollBy(index, parseInt(fontSize));
    movedivByOffset(offset);
	if(scrollInterval){
		clearInterval(scrollInterval);
		scrollInterval = null;
	}
    scrollInterval = setInterval("movedivByOffset(" + offset +")", 100);
    evt.cancelBubble = true;
    return false;
}

function scrollBy(index, px) {
    var scroller = scrollBars[index];
    // scroller = scrollBars[index]; //Sehrawat

    var elem = document.getElementById(scroller.ownerContentID);
    var top = parseInt(elem.style.top);
    var scrollHeight = parseInt(scroller.contentScrollHeight);
    var height = scroller.ownerHeight;
    var now = new Date();  
    
    if(autoScrolling && scrollingBeginTime && now-scrollingBeginTime>3000){
    	scrollEngaged = false;
 		scrollingBeginTime = null;
    	autoScrolling = false;   	
    }
    if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
        shiftBy(elem, 0, px);
    } else {
    	scrollEngaged = false;
        clearInterval(scrollInterval);
		scrollInterval=null;
		scrollingBeginTime = null;
    	autoScrolling = false;
    }
}
function movediv(evnt){
	if(captured){
		evnt = evnt || window.event;

		scrollBar=scrollBars[movediv.index];
 		var mousePos = mouseCoords(evnt);
 		var targetHeight=mousePos.y - mouseOffset.y;
 		var divIdct = scrollBar.indicator.parentNode;
 		var idctHeight = divIdct.offsetHeight;
 		if( targetHeight<scrollBar.upEdge)
			targetHeight = scrollBar.upEdge;
		if( targetHeight+idctHeight  > scrollBar.downEdge )
			targetHeight = scrollBar.downEdge-idctHeight;
			
 		if( targetHeight>=scrollBar.upEdge && targetHeight<=scrollBar.downEdge ){
 			divIdct.style.top = targetHeight+'px';
			shiftContent(targetHeight);
 		}
	}
	return false;
}

function shiftContent( TopOfIndicator ){
	var divIdct = scrollBar.indicator.parentNode;	
 	var ownerDiv = document.getElementById(scrollBar.ownerID);
 	var contentDiv = document.getElementById(scrollBar.ownerContentID);
 	contentDiv.style.top = (parseInt(ownerDiv.style.top)+(scrollBar.upEdge-TopOfIndicator)*((scrollBar.contentElem.clientHeight)/scrollBar.scrollBarHeight)*-1)+'px';	
}
function movedivByOffset(offset){
	var divIdct = scrollBar.indicator.parentNode;
	var idctHeight = divIdct.offsetHeight;
	var currentPosition = GetAbsoluteLocationEx(divIdct);
	var targetY = currentPosition.absoluteTop+offset;
	
	var now = new Date(); 
	
	if(autoScrolling && scrollingBeginTime && now-scrollingBeginTime>3000){
    	scrollEngaged = false;
 		scrollingBeginTime = null;
    	autoScrolling = false;   	
    }
	
	var exceeded = false;
	if( targetY<scrollBar.upEdge){
		targetY = scrollBar.upEdge;
		exceeded = true;
	}
	if( targetY+idctHeight  > scrollBar.downEdge ){
		targetY = scrollBar.downEdge-idctHeight;
		exceeded = true;
	}
	if( scrollEngaged && targetY>=scrollBar.upEdge && targetY <=scrollBar.downEdge ){
		divIdct.style.top = targetY+'px';
		shiftContent( targetY );
		if(exceeded)scrollEngaged=false;
			
	}else{
	    scrollEngaged = false;
        clearInterval(scrollInterval);
		scrollInterval=null;
		scrollingBeginTime = null;
    	autoScrolling = false;
	}
}

function initScroll(index) {
    
   
    this.upButton.onmousedown = handleScrollClick;
    this.upButton.onmouseup = handleScrollStop;
    this.upButton.oncontextmenu = blockEvent;
	this.upButton.absolutePosition = GetAbsoluteLocationEx(this.upButton);
	
    this.dnButton.onmousedown = handleScrollClick;
    this.dnButton.onmouseup = handleScrollStop;
    this.dnButton.oncontextmenu = blockEvent;
    this.dnButton.absolutePosition = GetAbsoluteLocationEx(this.dnButton) ;
    
    this.upEdge = this.upButton.absolutePosition.absoluteTop+this.upButton.absolutePosition.offsetHeight;
    this.downEdge = this.dnButton.absolutePosition.absoluteTop;
    
    this.scrollBarHeight = this.upEdge - this.downEdge;
	this.scrollBarHeight=this.scrollBarHeight+10;
    var ownerPosition = GetAbsoluteLocationEx(document.getElementById(this.ownerID));
    this.indicator.parentNode.style.left = (ownerPosition.absoluteLeft+ownerPosition.offsetWidth-7)+'px';
	this.indicator.parentNode.style.top = this.upEdge + 'px';

	//Initialize scrollbar as required: no arrows, transperant
	disableArrows(this.upButton,this.dnButton);
	var outterWrapper = document.getElementById(this.ownerID);
	outterWrapper.style.borderRight="2px solid #DADBD8";
	setAlpha(this.indicator, 0.5);
	
	
    document.onmouseup= function(evt){
		captured=false;
		document.onmousemove=null;
	};
		
    this.indicator.onmouseup= function(evt){
		captured=false;
		document.onmousemove=null;
	};	
	this.indicator.onmousedown= function(evt){
		captured=true;
		evt = (evt) ? evt : event;
		var target = (evt.target) ? evt.target : evt.srcElement;
		var divIdct = target.parentNode;
		mouseOffset = getMouseOffset(divIdct, evt);
		document.onmousemove=movediv;
		movediv.index=index;
		return false;
	};
	
    var isIEMac = (navigator.appName.indexOf("Explorer") != -1 && navigator.userAgent.indexOf("Mac") != -1);
    if (!isIEMac) {
        document.getElementById("innerWrapper"+index).style.overflow = "hidden";
    }
}


function scrollBar(ownerID, ownerContentID, upID, dnID, indicatorId,index1) {
    this.ownerID = ownerID;
    this.ownerContentID = ownerContentID;
    this.index =scrollBars.length;    
   
    this.upButton = document.getElementById(upID);
    this.dnButton = document.getElementById(dnID);
    this.indicator = document.getElementById(indicatorId); 
    this.upButton.index = this.index;
    this.dnButton.index = this.index;
    this.indicator.index = this.index;    
    this.ownerHeight = parseInt(getElementStyle(this.ownerID, "height", "height"));
    this.contentElem = document.getElementById(ownerContentID);
    this.contentFontSize = parseInt(getElementStyle(this.ownerContentID,"fontSize", "font-size"));
    this.contentScrollHeight = (this.contentElem.scrollHeight) ? 
    this.contentElem.scrollHeight : this.contentElem.offsetHeight;

    this.initScroll = initScroll;
}

// Another Function Zuhair
function createIndicatorDiv(index){
	var indcDiv = document.createElement("div");
	indcDiv.id="idctDiv"+index;
	
	indcDiv.style.position = "absolute";
	indcDiv.style.zIndex = 0;
	indcDiv.style.cursor = "pointer";
	indcDiv.style.height ="12px";
	indcDiv.style.width ="12px";
	
	var idctImg = document.createElement("img");
	idctImg.id="indicator"+index;
	idctImg.src="images/indicator.gif";
	idctImg.style.cursor="pointer";
	idctImg.alt="Scroll Up";
	idctImg.height ="20";
	idctImg.width ="10";
	idctImg.onmousemove = function(){
		return false;
	};
	indcDiv.appendChild(idctImg);
	document.body.appendChild(indcDiv);
	return indcDiv;
}
function setPage(index){
  var upArr = document.getElementById("lineup"+index);
  var dnArr = document.getElementById("linedown"+index);
  disableArrows(upArr,dnArr);  
  var outterWrapper = document.getElementById("outerWrapper"+index);
  outterWrapper.style.borderRight="2px solid #DADBD8";
  var indicator = createIndicatorDiv(index);;
  setAlpha(indicator, 0.5);
}
function initScrollers() {
	setPage(0);
    scrollBars[0] = new scrollBar("outerWrapper0", "innerWrapper0", "lineup0","linedown0", "indicator0",0);           
    scrollBars[0].initScroll(0);
	setPage(1);   
    scrollBars[1] = new scrollBar("outerWrapper1", "innerWrapper1", "lineup1","linedown1", "indicator1",1); 
    scrollBars[1].initScroll(1);  	setPage(2);
    scrollBars[2] = new scrollBar("outerWrapper2", "innerWrapper2", "lineup2","linedown2", "indicator2",2);           
    scrollBars[2].initScroll(2);
	setPage(3);   
    scrollBars[3] = new scrollBar("outerWrapper3", "innerWrapper3", "lineup3","linedown3", "indicator3",3); 
    scrollBars[3].initScroll(3);
 
}