var topx=0;
var granularity=3;
var bot;				//this is height
var width;
var scrollboxid;
var downbutid;
var upbutid;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function scrollerinit(par_scrollboxid,par_downbutid,par_upbutid,par_width,par_bot){
scrollboxid=par_scrollboxid;
downbutid=par_downbutid;
upbutid=par_upbutid;
bot=par_bot;
width=par_width;
}

function movedown(){
	el=document.getElementById(scrollboxid);
	if((bot+granularity)<el.offsetHeight){
		topx=topx+granularity
		bot=bot+granularity;
		clip='rect('+topx+'px '+ width+'px '+bot+'px 0px)';
		el.style.clip=clip;
		el.style.top='-'+topx+'px';
	}
}
function moveup(){
	el=document.getElementById(scrollboxid);
	if((topx-granularity)>=0){
		topx=topx-granularity
		bot=bot-granularity;
		el.style.clip='rect('+topx+'px '+width+'px '+bot+'px 0px)';
		el.style.top='-'+topx+'px';
	}
}
addLoadListener(initDragNDrop);

function initDragNDrop()
{
  if (identifyBrowser().indexOf("ie") >= 0 && identifyOS() == "mac")
  {
    return false;
  }
	el=document.getElementById('sdown');
/*
	attachEventListener(document.getElementById(downbutid), "mousedown", mousestartdown, false);
	attachEventListener(document.getElementById(upbutid), "mousedown", mousestartup, false);
	attachEventListener(document, "mouseup", mouseenddown, false);
*/
	attachEventListener(document.getElementById(downbutid), "mouseover", mousestartdown, false);
	attachEventListener(document.getElementById(upbutid), "mouseover", mousestartup, false);
	attachEventListener(document.getElementById(downbutid), "mouseout", mouseenddown, false);
	attachEventListener(document.getElementById(upbutid), "mouseout", mouseenddown, false);

}
var intervalprocess;
var moving;
function mousestartdown(){
//	alert("startit");
	intervalprocess=setInterval("movedown()",5);
	moving=-1;
}
function mousestartup(){
//	alert("startit");
	intervalprocess=setInterval("moveup()",5);
	moving=-1;
}
function mouseenddown(){
//	alert("endit");
	if(moving) clearTimeout(intervalprocess);
}


function mousemoveCheckThreshold(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  if (typeof event.pageX == "undefined")
  {
    event.pageX = event.clientX + getScrollingPosition()[0];
    event.pageY = event.clientY + getScrollingPosition()[1];
  }

  var target = document.currentTarget;

  if (Math.abs(target.clickOriginX - event.pageX) > 3 || Math.abs(target.clickOriginY - event.pageY) > 3)
  {
    detachEventListener(document, "mousemove", mousemoveCheckThreshold, false);
    detachEventListener(document, "mouseup", mouseupCancelThreshold, false);

    attachEventListener(document, "mousemove", mousemoveDragNDrop, false);
    attachEventListener(document, "mouseup", mouseupDragNDrop, false);
    attachEventListener(document, "click", clickDragNDrop, false);
  }

  stopDefaultAction(event);

  return true;
}

function mouseupCancelThreshold()
{
  detachEventListener(document, "mousemove", mousemoveCheckThreshold, false);
  detachEventListener(document, "mouseup", mouseupCancelThreshold, false);
  
  return true;
}

function mousemoveDragNDrop(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  if (typeof event.pageX == "undefined")
  {
    event.pageX = event.clientX + getScrollingPosition()[0];
    event.pageY = event.clientY + getScrollingPosition()[1];
  }

  var target = document.currentTarget;

  target.style.left = event.pageX + target.differenceX + "px";
  target.style.top = event.pageY + target.differenceY + "px";

  stopDefaultAction(event);

  return true;
}

function mouseupDragNDrop(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  if (typeof event.pageX == "undefined")
  {
    event.pageX = event.clientX + getScrollingPosition()[0];
    event.pageY = event.clientY + getScrollingPosition()[1];
  }

  var hotZone = document.getElementById("shoppingCart");
  var hotZonePosition = getPosition(hotZone);
  var target = document.currentTarget;

  if (!((event.pageX > hotZonePosition[0]) && (event.pageX < hotZonePosition[0] + hotZone.offsetWidth) && (event.pageY > hotZonePosition[1]) && (event.pageY < hotZonePosition[1] + hotZone.offsetHeight)))
  {
    target.style.left = target.originLeft + "px";
    target.style.top = target.originTop + "px";
  }
  else
  {
    var cartInput = document.getElementById("cartInput");

    if (cartInput == null)
    {
      var cartInput = document.createElement("input");

      cartInput.setAttribute("id", "cartInput");
      cartInput.setAttribute("name", "cartInput");
      cartInput.setAttribute("type", "hidden");
      cartInput.setAttribute("value", target.getAttribute("id"));
      document.getElementById("shoppingCart").appendChild(cartInput);
    }
    else
    {
      cartInput.setAttribute("value", cartInput.getAttribute("value") + "," + target.getAttribute("id"));
    }

    // In a practical system, you would probably submit the form here.
    alert("Item dropped on shopping cart!");
    target.style.left = target.originLeft + "px";
    target.style.top = target.originTop + "px";
  }

  detachEventListener(document, "mousemove", mousemoveDragNDrop, false);
  detachEventListener(document, "mouseup", mouseupDragNDrop, false);

  return true;
}

function clickDragNDrop(event)
{
  if (typeof event == "undefined")
  {
    event = window.event;
  }

  detachEventListener(document, "click", clickDragNDrop, false);

  stopDefaultAction(event);

  return true;
}

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
};




function attachEventListener(target, eventType, functionRef, capture)
{
    if (typeof target.addEventListener != "undefined")
    {
        target.addEventListener(eventType, functionRef, capture);
    }
    else if (typeof target.attachEvent != "undefined")
    {
        target.attachEvent("on" + eventType, functionRef);
    }
    else
    {
        eventType = "on" + eventType;

        if (typeof target[eventType] == "function")
        {
            var oldListener = target[eventType];

            target[eventType] = function()
            {
                oldListener();

                return functionRef();
            }
        }
        else
        {
            target[eventType] = functionRef;
        }
    }

    return true;
};




function detachEventListener(target, eventType, functionRef, capture)
{
    if (typeof target.removeEventListener != "undefined")
    {
        target.removeEventListener(eventType, functionRef, capture)
    }
    else if (typeof target.detachEvent != "undefined")
    {
        target.detachEvent("on" + eventType, functionRef);
    }
    else
    {
        target["on" + eventType] = null;
    }

    return true;
};




function getEventTarget(event)
{
    var targetElement = null;

    if (typeof event.target != "undefined")
    {
        targetElement = event.target;
    }
    else
    {
        targetElement = event.srcElement;
    }

    while (targetElement.nodeType == 3 && targetElement.parentNode != null)
    {
        targetElement = targetElement.parentNode;
    }

    return targetElement;
};




function stopDefaultAction(event)
{
    event.returnValue = false;

    if (typeof event.preventDefault != "undefined")
    {
        event.preventDefault();
    }

    return true;
};




function getScrollingPosition()
{
  //array for X and Y scroll position
  var position = [0, 0];

  //if the window.pageYOffset property is supported
  if(typeof window.pageYOffset != 'undefined')
  {
    //store position values
    position = [
      window.pageXOffset,
      window.pageYOffset
      ];
  }

  //if the documentElement.scrollTop property is supported
  //and the value is greater than zero
  if(typeof document.documentElement.scrollTop != 'undefined'
    && document.documentElement.scrollTop > 0)
  {
    //store position values
    position = [
      document.documentElement.scrollLeft,
      document.documentElement.scrollTop
      ];
  }

  //if the body.scrollTop property is supported
  else if(typeof document.body.scrollTop != 'undefined')
  {
    //store position values
    position = [
      document.body.scrollLeft,
      document.body.scrollTop
      ];
  }

  //return the array
  return position;
};




function getPosition(theElement)
{
    var positionX = 0;
    var positionY = 0;

    while (theElement != null)
    {
        positionX += theElement.offsetLeft;
        positionY += theElement.offsetTop;
        theElement = theElement.offsetParent;
    }

    return [positionX, positionY];
};




function identifyBrowser()
{
    var agent = navigator.userAgent.toLowerCase();

    if (typeof navigator.vendor != "undefined" && navigator.vendor == "KDE" && typeof window.sidebar != "undefined")
    {
        return "kde";
    }
    else if (typeof window.opera != "undefined")
    {
      var version = parseFloat(agent.replace(/.*opera[\/ ]([^ $]+).*/, "$1"));

      if (version >= 7)
      {
        return "opera7";
      }
      else if (version >= 5)
      {
        return "opera5";
      }

      return false;
    }
    else if (typeof document.all != "undefined")
    {
        if (typeof document.getElementById != "undefined")
        {
          var browser = agent.replace(/.*ms(ie[\/ ][^ $]+).*/, "$1").replace(/ /, "");

      if (typeof document.uniqueID != "undefined")
      {
        if (browser.indexOf("5.5") != -1)
        {
          return browser.replace(/(.*5\.5).*/, "$1");
        }
        else
        {
          return browser.replace(/(.*)\..*/, "$1");
        }
      }
      else
      {
        return "ie5mac";
      }
        }

        return false;
    }
    else if (typeof document.getElementById != "undefined")
    {
        if (navigator.vendor.indexOf("Apple Computer, Inc.") != -1)
        {
            if (typeof window.XMLHttpRequest != "undefined")
            {
                return "safari1.2";
            }

            return "safari1";
        }
        else if (agent.indexOf("gecko") != -1)
        {
            return "mozilla";
        }
    }

    return false;
};




function identifyOS()
{
    var agent = navigator.userAgent.toLowerCase();

    if (agent.indexOf("win") != -1)
    {
        return "win";
    }
    else if (agent.indexOf("mac"))
    {
        return "mac";
    }
    else
    {
        return "unix";
    }

    return false;
};