var scrollIncrement = 15;

var blockTrackClick = false;
var scrollInterval;
var scrollHoldInterval = 250;
var activeScrollArea = null;
var activeScrollResetTimer;

function SetScrollAreaActive(elem)
{
	clearTimeout(activeScrollResetTimer);
	activeScrollArea = elem;
}

function SetScrollAreaInactive(elem)
{
	activeScrollResetTimer = setTimeout("activeScrollArea = null", 100);
}

function StartScrollUp(elem)
{
	ScrollUp(elem);
	scrollInterval = setInterval("ScrollUp('" + elem + "');", scrollHoldInterval);
}

function StartScrollDown(elem)
{
	ScrollDown(elem);
	scrollInterval = setInterval("ScrollDown('" + elem + "');", scrollHoldInterval);
}

function StopScroll()
{
	clearInterval(scrollInterval);
}

function ScrollUp(elem)
{
	var scrollPos = GetTopScrollAmount(elem) + scrollIncrement;
	if (scrollPos > 0) scrollPos = 0;
	document.getElementById(elem + "_ScrollingArea").style.top = scrollPos + "px";
	
	SetScrollBarPercentage(elem, GetScrollPercentage(elem));
}

function ScrollDown(elem)
{
	var scrollPos = GetTopScrollAmount(elem) - scrollIncrement;
	scrollHeight = GetScrollHeight(elem);
	if (scrollPos < (-1 * scrollHeight)) scrollPos = (-1 * scrollHeight);
	document.getElementById(elem + "_ScrollingArea").style.top = scrollPos + "px";
	
	SetScrollBarPercentage(elem, GetScrollPercentage(elem));
}

function ScrollBarTrackClick(elem, event)
{
	if (blockTrackClick) return;
	
	var y, yMove;
	
	if (browser.isIE)
		y = window.event.clientY + document.documentElement.scrollTop  + document.body.scrollTop;
	if (browser.isNS)
		y = event.clientY + window.scrollY;
	
	if (y > GetPosY(document.getElementById(elem + "_Gripper")))
	{
		ScrollDown(elem);
		ScrollDown(elem);
	}
	else
	{
		ScrollUp(elem);
		ScrollUp(elem);
	}
}

function GetTopScrollAmount(elem)
{
	return GetPosY(document.getElementById(elem + "_ScrollingArea")) - GetPosY(document.getElementById(elem + "_Content"));
}

function GetScrollHeight(elem)
{
	return document.getElementById(elem + "_ScrollingArea").offsetHeight - document.getElementById(elem + "_Content").offsetHeight;
}

function GetTrackDistance(elem)
{
	return document.getElementById(elem + "_GripperContainer").offsetHeight - document.getElementById(elem + "_Gripper").offsetHeight;
}

function GetGripperPosition(elem)
{
	return GetPosY(document.getElementById(elem + "_Gripper")) - GetPosY(document.getElementById(elem + "_GripperContainer"));
}

function GetScrollBarPercentage(elem)
{
	var topOffset = GetGripperPosition(elem);
	var trackDistance = GetTrackDistance(elem);
	
	return topOffset / trackDistance;
}

function SetScrollBarPercentage(elem, percentage)
{
	GetTrackDistance(elem)
	
	document.getElementById(elem + "_Gripper").style.top = Math.floor(GetTrackDistance(elem) * percentage) + "px";
}

function GetScrollPercentage(elem)
{
	return -1 * (GetTopScrollAmount(elem) / GetScrollHeight(elem));
}

function SetScrollPercentage(elem, percentage)
{
	document.getElementById(elem + "_ScrollingArea").style.top = (-1 * Math.floor(GetScrollHeight(elem) * percentage)) + "px";
}

function SetScrollbarHeight(elem)
{
	var visiblePercentage = document.getElementById(elem + "_Content").offsetHeight / document.getElementById(elem + "_ScrollingArea").offsetHeight;
	
	if (visiblePercentage > 1)
		visiblePercentage = 1;
	
	var gripperHeight = Math.floor(document.getElementById(elem + "_GripperContainer").offsetHeight * visiblePercentage);
	
	if (gripperHeight < 20)
		gripperHeight = 20;
	
	document.getElementById(elem + "_Gripper").style.height = gripperHeight + "px";
}

function GetPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent) 
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;

	return curleft;
}

function GetPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;

	return curtop;
}

//*****************************************************************************
// Javascript Mouse Wheel handling code - based on an article by:
// http://adomas.org/javascript-mouse-wheel/
//*****************************************************************************

function handleMouseWheelScroll(scrollDelta)
{
	var safety = 0;
	
	if (scrollDelta < 0)
	{
		for (var x=0; x > scrollDelta && safety < 3; x--)
		{
			ScrollDown(activeScrollArea);
			safety++;
		}
	}
	
	if (scrollDelta > 0)
	{
		for (var x=0; x < scrollDelta && safety < 3; x++)
		{
			ScrollUp(activeScrollArea);
			safety++;
		}
	}
	
}

function mouseWheelActive(event)
{
	if (activeScrollArea == null)
		return;
	
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/4;
	}
	if (delta)
		handleMouseWheelScroll(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', mouseWheelActive, false);
window.onmousewheel = document.onmousewheel = mouseWheelActive;

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// Modified to bound allowable drag area to relative parent by Adam Hamilton.
//*****************************************************************************

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function ScrollBarDragStart(event, id) {

  blockTrackClick = true;

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", ScrollBarDragGo);
    document.attachEvent("onmouseup",   ScrollBarDragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", ScrollBarDragGo,   true);
    document.addEventListener("mouseup",   ScrollBarDragStop, true);
    event.preventDefault();
  }
}

function ScrollBarDragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
  
  // Bound the movement of the element to within it's parent
  var ctx, cty, mtx, mty; //, cbx, cby;
  
  ctx = dragObj.elStartLeft + x - dragObj.cursorStartX;
  cty = dragObj.elStartTop  + y - dragObj.cursorStartY;
  
  mtx = dragObj.elNode.parentNode.offsetWidth  - dragObj.elNode.offsetWidth;
  mty = dragObj.elNode.parentNode.offsetHeight - dragObj.elNode.offsetHeight;
  
  if (ctx > mtx) ctx = mtx;
  if (ctx < 0) ctx = 0;
  
  if (cty > mty) cty = mty;
  if (cty < 0) cty = 0;  

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (ctx) + "px";
  dragObj.elNode.style.top  = (cty) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
   
  var elemName = dragObj.elNode.id.split('_')[0];
  SetScrollPercentage(elemName, GetScrollBarPercentage(elemName));
}

function ScrollBarDragStop(event) {

  setTimeout("blockTrackClick = false;", 100);

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", ScrollBarDragGo);
    document.detachEvent("onmouseup",   ScrollBarDragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", ScrollBarDragGo,   true);
    document.removeEventListener("mouseup",   ScrollBarDragStop, true);
  }
}




// when the DOM is ready...
$(document).ready(function () {

    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');
	
	var $panels1 = $('#slider1 .scrollContainer > div');
    var $container1 = $('#slider1 .scrollContainer');

    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = true;

    // float the panels left if we're going horizontal
    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });
		
		$panels1.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });
		
		
		

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', $panels[0].offsetWidth * $panels.length);
		$container1.css('width', $panels1[0].offsetWidth * $panels1.length);
		
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	var $scroll1 = $('#slider1 .scroll1').css('overflow', 'hidden');
	
	
	
	 

    // apply our left + right buttons
    $scroll
        .before('')
        .after('');
		
	 $scroll1
       .before('<img class="scrollButtons1 left1" src="leftarrow.gif" width="21" height="21" />')
       .after('<img class="scrollButtons1 right1" src="rightarrow.gif" width="21" height="21" />');
    // handle nav selection
	
	
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }
	
	 function selectNav1() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);
	$('#slider1 .navigation1').find('a').click(selectNav1);

    // go find the navigation link that has this target and select the nav
   

     
	 function trigger(data) {
        var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
   	 }
	 
	  function trigger1(data) {
        var el = $('#slider1 .navigation1').find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
   	 }
	
    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
		$('ul.navigation1 a:first').click();
    }
	
	

    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;


    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };
	
	
	var scrollOptions1 = {
        target: $scroll1, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels1,

        navigation: '.navigation1 a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left1', 
        next: 'img.right1',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger1, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };


    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);
	
	$('#slider1').serialScroll(scrollOptions1);
	

    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
   

    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 5;
	scrollOptions1.duration = 5;
   

});