btc.scroller =
{
	position: 0,
	startMouse: 0,
	isMouseDown: false,
	onRelease: null,
	onLocated: null,
	onBrandLocated: null,
	scrollPerPixel: 0,
	browser: null,
	
	barWidth : null,
	scrollerWidth: null,
	itemWidth: null,
	browserWidth: null,
	
	framePhone : 'btconn-selector-browse-phone',
	frameTomTom : 'btconn-selector-browse-tomtom',
	
	frame : null,
	scrollbar: "btconn-selector-scroller",
	bar: "btconn-selector-scroller-bar",
	left: "btconn-selector-scroller-left",
	right: "btconn-selector-scroller-right",

	init : function ()
	{		
		btc.scroller.frame = document.getElementById( btc.scroller.framePhone ) || document.getElementById( btc.scroller.frameTomTom );
		
		if (btc.scroller.frame)
		{
			btc.scroller.scrollbar = document.getElementById( btc.scroller.scrollbar );
			btc.scroller.bar = document.getElementById( btc.scroller.bar );
			btc.scroller.left = document.getElementById( btc.scroller.left );
			btc.scroller.right = document.getElementById( btc.scroller.right );
					
			btc.scroller.frame.style.overflow = 'hidden';	
			btc.scroller.scrollbar.style.display = 'block';
		    btc.scroller.readDefault( );
			
		   if( document.onselectstart )
		   {
				btc.event.register ([btc.scroller.scrollbar, btc.scroller.frame ], 'selectstart', btc.scroller.eventHandlers.selectstart);
		   }
		
			if( document.all )	
			{
				btc.scroller.frame.ondrag = function( ){ return false; }
				btc.scroller.frame.onselectstart = function( ){ return false; }
				btc.scroller.scrollbar.ondrag = function( ){ return false; }
				btc.scroller.scrollbar.onselectstart = function( ){ return false; }
			}
			
			btc.event.register ([btc.scroller.bar], 'mousedown', btc.scroller.eventHandlers.startDrag);
			btc.event.register ([btc.scroller.scrollbar], 'mousedown', btc.scroller.eventHandlers.moveToThisPoint);
			btc.event.register ([btc.scroller.right], 'click', btc.scroller.eventHandlers.moveRight);
			btc.event.register ([btc.scroller.left], 'click', btc.scroller.eventHandlers.moveLeft);
					
			btc.event.register ([document], 'mouseup', btc.scroller.eventHandlers.stopDrag);
			btc.event.register ([document], 'mousemove', btc.scroller.eventHandlers.dragToThisPoint);
			
			btc.scroller.barWidth = btc.scroller.bar.offsetWidth;
			btc.scroller.scrollerWidth = btc.scroller.scrollbar.offsetWidth;
			
			btc.event.register( [btc.scroller.scrollbar, btc.scroller.frame] , 'mouseover' , btc.scroller.eventHandlers.unsetOpaque);
			btc.event.register( [btc.scroller.scrollbar, btc.scroller.frame] , 'mouseout' , btc.scroller.eventHandlers.setOpaque);
			
			btc.scroller.scrollToSelected ();
			
			btc.scroller.attachHoverHandlers ();
		}
	},
	
	
	
	
	
	/**
	*	 eventhandlers called after event dispatch in the browser
	*/
	eventHandlers :
	{
		startDrag: function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				var intMouse = btc.event.getX( e );
				var intPosition = btc.element.getX( btc.scroller.scrollbar );
			
				btc.scroller.startMouse = ( intMouse - intPosition ) - btc.scroller.position;
				btc.scroller.isMouseDown = true;
			}
		}, 
		
		moveToThisPoint: function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				if( btc.scroller.isMouseDown == true )
				{
					return false;
				}
				
				if( btc.event.getTargetId( e ) != btc.scroller.scrollbar )
				{
					return false;
				}
			
				var intMouse = btc.event.getX( e );
				var intPosition = btc.event.getX( btc.scroller.scrollbar );
				var intTarget = 0;
				var intXLimit = ( btc.scroller.scrollbar.clientWidth - btc.scroller.bar.clientWidth 
					- btc.scroller.left.clientWidth - btc.scroller.right.clientWidth );
				
				intTarget = ( intMouse - intPosition );
				intTarget -= Math.floor( btc.scroller.bar.clientWidth / 2 );
				
				if( intTarget < 0 ) intTarget = 0;
				if( intTarget > intXLimit ) intTarget = intXLimit;
		
				btc.scroller.bar.style.left = intTarget + "px";
				btc.scroller.position = intTarget;
				btc.scroller.moveFrame( );
			}
		}, 
				
		moveRight: function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				var intTarget = btc.scroller.position + Math.floor( btc.scroller.frame.clientWidth / btc.scroller.scrollPerPixel );
				var intXLimit = ( btc.scroller.scrollbar.clientWidth - btc.scroller.bar.clientWidth 
					- btc.scroller.left.clientWidth - btc.scroller.right.clientWidth );
					
				if( intTarget < 0 ) intTarget = 0;
				if( intTarget > intXLimit ) intTarget = intXLimit;
				
				btc.scroller.bar.style.left = intTarget + "px";
				btc.scroller.position = intTarget;
				btc.scroller.moveFrame( );
				btc.event.cancel( e );
			}
		},
		
		moveLeft: function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				var intTarget = btc.scroller.position - Math.floor( btc.scroller.frame.clientWidth / btc.scroller.scrollPerPixel );
				var intXLimit = ( btc.scroller.scrollbar.clientWidth - btc.scroller.bar.clientWidth 
					- btc.scroller.left.clientWidth - btc.scroller.right.clientWidth );
					
				if( intTarget < 0 ) intTarget = 0;
				if( intTarget > intXLimit ) intTarget = intXLimit;
				
				btc.scroller.bar.style.left = intTarget + "px";
				btc.scroller.position = intTarget;
				btc.scroller.moveFrame( );
				btc.event.cancel( e );
			}
		},
			
		stopDrag: function( e )
		{	
			btc.scroller.startMouse = 0;
			btc.scroller.isMouseDown = false;
			
			if( btc.scroller.onRelease != null )
			{
				btc.scroller.onRelease( );
			}
		},
		
		dragToThisPoint: function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				if( btc.scroller.isMouseDown == false )
				{
					return false;
				}
			
				var intMouse = btc.event.getX( e );
				var intPosition = btc.element.getX( btc.scroller.scrollbar );
				var intTarget = 0;
				var intXLimit = ( btc.scroller.scrollbar.clientWidth - btc.scroller.bar.clientWidth 
					- btc.scroller.left.clientWidth - btc.scroller.right.clientWidth );
				
				intTarget = ( intMouse - intPosition ) - btc.scroller.startMouse;
				
				if( intTarget < 0 ) intTarget = 0;
				if( intTarget > intXLimit ) intTarget = intXLimit;
		
				btc.scroller.bar.style.left = intTarget + "px";
				btc.scroller.position = intTarget;
				btc.scroller.moveFrame( );
			}
		},
		
		
		
		
		
		
		
		
		
		
		
		
		
		/**
		*	 methods called by eventHandlers for setting opaqueness of the scrollable div
		*/
		unsetOpaque : function ( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				var images = btc.scroller.frame.getElementsByTagName( "img" );
				var length = images.length;
				
				for( var i = 0; i < length; i++ )
				{
					var image = images[i];
					if( btc.element.getAttr( image.parentNode , 'class' ) && btc.element.getAttr( image.parentNode , 'class' ).indexOf( "current" ) == -1 )
					{                                    
						image.parentNode.className = "no-opacity";
					}
				}
			}
		},
		
		setOpaque : function( e )
		{
			e = e || window.event;
					
			if ( e )
			{
				if( btc.scroller.isMouseDown == true )
				{
					btc.scroller.onRelease = function( )
					{
						var images = btc.scroller.frame.getElementsByTagName( "img" );
						var length = images.length;
						
						for( var i = 0; i < length; i++ )
						{
							var image = images[i];
							
							if( btc.element.getAttr( image.parentNode , 'class' ) &&  btc.element.getAttr( image.parentNode , 'class' ).indexOf( "current" ) == -1 )
							{
								image.parentNode.className = "opacity";
							}
						}
						
						btc.scroller.onRelease = null;
					}
					
					return false;
				}
				
				var images = btc.scroller.frame.getElementsByTagName( "img" );
				var length = images.length;
				
				for( var i = 0; i < length; i++ )
				{
					var image = images[i];
					if( btc.element.getAttr( image.parentNode , 'class' ) && btc.element.getAttr( image.parentNode , 'class' ).indexOf( "current" ) == -1 )
					{
						image.parentNode.className = "opacity";
					}
				}
			}
		},
		
		hoverOn : function ( e, me )
		{
			e = e || window.event;

			var target = e.srcElement || e.target;
			var relatedTarget = e.fromElement || e.relatedTarget;	
		
					
			if ( function ()
			{
				var current = relatedTarget;
				while ( current )
				{
					if ( current == me ) return false;
					current = current.parentNode;
				}
				return true;
			
			}())
			{
				var small = me.getElementsByTagName ('img')[0].style.display = 'none';
				var big = me.getElementsByTagName ('img')[1].style.display = 'block';				
			}			
		},
		
		hoverOff : function ( e, me )
		{
			e = e || window.event;
			
			var target = e.srcElement || target;
			var relatedTarget = e.relatedTarget || e.toElement;	
				
			
			if ( function ()
			{
				var current = relatedTarget;
				while ( current )
				{
					if ( current == me ) return false;
					current = current.parentNode;
				}
				return true;
			
			}())
			{
				if ( me.getElementsByTagName('a')[0].className != 'current' )
				{
					var big = me.getElementsByTagName ('img')[1].style.display = 'none';
					var small = me.getElementsByTagName ('img')[0].style.display = 'block';
				}							
			}
		}
	},
	
	
	
		
		
	
	
	
	
	
	
	
	
	/**
	*	methods called by init to setup the scrollable area
	*/
	calculatePixelToScroll: function( )
	{ 		
		if( btc.scroller.frame)
		{
			btc.scroller.scrollPerPixel = 
			( btc.scroller.frame.scrollWidth - btc.scroller.frame.offsetWidth ) / 
			( btc.scroller.scrollbar.offsetWidth - btc.scroller.left.offsetWidth - btc.scroller.right.offsetWidth - btc.scroller.bar.offsetWidth )
		}
		return btc.scroller.scrollPerPixel;
	},
	
	readDefault: function ()
	{
		btc.scroller.browser = btc.scroller.frame.getElementsByTagName( "ul" )[0];
		btc.scroller.itemWidth = btc.scroller.frame == document.getElementById( btc.scroller.frameTomTom ) ? 140 : 140;          
		var count = btc.scroller.browser.childNodes.length;
		btc.scroller.browserWidth = count * btc.scroller.itemWidth;		
		btc.scroller.setWidth( btc.scroller.browserWidth );
	},

	attachHoverHandlers : function ()
	{
		var children = btc.scroller.browser.getElementsByTagName ('li');
		btc.event.register (children, 'mouseover', btc.scroller.eventHandlers.hoverOn);	
		btc.event.register (children, 'mouseout', btc.scroller.eventHandlers.hoverOff);			
	},
	
	setWidth: function( intWidth )
	{
		var browser = btc.scroller.frame.getElementsByTagName( "ul" )[0];
		browser.width = intWidth;
		browser.style.width = intWidth + "px";
		btc.scroller.calculatePixelToScroll( );
	},
		
	/**
	* utility method used by scrolling event handlers
	*/
	moveFrame: function( )
	{                                                                                                 
		btc.scroller.frame.scrollLeft = ( btc.scroller.position * btc.scroller.scrollPerPixel );
	},
	
	/**
	* scroll the selected phone / device into view
	*/
	scrollToSelected : function ()
	{
		btc.scroller.frame.scrollLeft = btc.scroller.itemWidth * btc.scroller.getSelectedIndex();	
		var rawPixelsToScroll = (btc.scroller.itemWidth * btc.scroller.getSelectedIndex()) / (btc.scroller.scrollPerPixel || 1);
		var realPixelsToScroll = 0;
	
		if(rawPixelsToScroll + btc.scroller.barWidth + 42 > btc.scroller.scrollerWidth)
		{
			
			realPixelsToScroll =  btc.scroller.scrollerWidth -  btc.scroller.barWidth - 42;
		}
		else
		{
			realPixelsToScroll = rawPixelsToScroll;
		}

		btc.scroller.bar.style.left = realPixelsToScroll + 'px';
		btc.scroller.position = realPixelsToScroll;		
	},
	
	/**
	*	find out what the index is of the selected device / phone
	*/
	getSelectedIndex : function ()
	{
		var anchors = btc.scroller.browser.getElementsByTagName('a');
		var length = anchors.length;
		for(var index = 0; index < length; index++)
		{
			var anchor = anchors[index];
			if(anchor.className == 'current')
			{
				return index;
			}
		}
		
		return 0;	
	}
};