/*
* Created : 3/17/2011
* Author  : pscott
* Purpose : a custom horizontal scroll bar class that can be attached to any element,
* 			it scrolls between the _target's child elements' left edge
*
* jbethke 2011-03-30. Refacotred for revised behavior.
*/

HorizontalScroll = new Class.create({
	idName: 'categoryScroll',
	element: null,
	itemContainer: null,
	events: null,
	currentIndex: 0,
	
	initialize: function(containerElement) {
		this.events = new HorizontalScroll._events();
		
		//Addition. pscott 4-13-2011 : pre-load images
		for(var i = 0; i < this.categories.length; i++){
			this.fetchElement_forCategory(this.categories[i]);
		}
		
		// Draw widget DOM structure to page
		containerElement.appendChild(
			this.fetchDOM()
		);
		
		// Intialize flipper to start position
		this.updateFlipper();
	},
	
	// This categories listing should be dynamic eventually
	categories: [
		{
			imageName: "new_items.png", 
			alt: "Product Categories - New", 
			href: siteName + "/catalog/#/2/",
			type: 'normal'
		},{
			imageName: "mens.png", 
			alt: "Product Categories - Mens", 
			href: siteName + "/catalog/#/8/", 
			type: 'normal'
		},{
			imageName: "ladies.png", 
			alt: "Product Categories - Ladies", 
			href: siteName + "/catalog/#/14/", 
			type: 'normal'
		},{
			imageName: "performance.png", 
			alt: "Product Categories - Performance", 
			href: siteName + "/catalog#/28/", 
			type: 'normal'
		},{
			imageName: "tees.png", 
			alt: "Product Categories - Tees", 
			href: siteName + "/catalog/#/36/", 
			type: 'normal'
		},{
			imageName: "sweats.png", 
			alt: "Product Categories - Sweats", 
			href: siteName + "/catalog/#/60/", 
			type: 'normal'
		},{
			imageName: "polos.png", 
			alt: "Product Categories - Polos", 
			href: siteName + "/catalog/#/78/", 
			type: 'normal'
		},{
			imageName: "wovens.png", 
			alt: "Product Categories - Wovens", 
			href: siteName + "/catalog/#/94/", 
			type: 'normal'
		},{
			imageName: "outerwear.png", 
			alt: "Product Categories - Outerwear", 
			href: siteName + "/catalog/#/98/", 
			type: 'normal'
		},{
			imageName: "extras.png", 
			alt: "Product Categories - Extras", 
			href: siteName + "/catalog/#/116/", 
			type: 'normal'
		},{
			imageName: "headwear.png", 
			alt: "Product Categories - Headwear", 
			href: siteName + "/catalog/#/124/", 
			type: 'normal'
		},{
			imageName: "new2.png", 
			alt: "Product Categories - New", 
			href: siteName + "/catalog/#/2/", 
			type: 'normal'
		}
	],
	
	fetchDOM: function() {
		this.element = new Element('div', 
			{
			id: this.idName
		});
		
		// Construct flipper base elements
		leftFlipper = new Element('div', 
			{
			id: this.idName + "_leftFlipper"			
		});
			
		rightFlipper = new Element('div', 
			{
			id: this.idName + "_rightFlipper"			
		});
			
		this.itemContainer = new Element('div', 
			{
			id: this.idName + "_content"			
		});
						
		// Register Flipper events
		leftFlipper.observe('click', 
			this.events.flipLeft.bind(this));
		rightFlipper.observe('click', 
			this.events.flipRight.bind(this));
			
		// Add flipper elements
		this.element.appendChild(leftFlipper);
		this.element.appendChild(this.itemContainer);
		this.element.appendChild(rightFlipper);
		
		return this.element;
	},
	
	updateFlipper: function(startIndex) {
		startIndex = startIndex || 0;
		
		// Nuke contents
		this.itemContainer.update('');
		this.currentIndex = startIndex;
		
		// Loop through categories to show
		var maxToShow = 3;
		for(var i = startIndex; i < startIndex + maxToShow; i++) {
			
			// Re-evaluate the index to account for wrap-around
			realIndex = i % this.categories.length
			realIndex = realIndex < 0 ? this.categories.length + realIndex : realIndex;
			
			// Fetch category and add it to the page
			nextCategory = this.fetchElement_forCategory(this.categories[realIndex]);
			this.itemContainer.appendChild(nextCategory);
			
			// Wide categories occupy two spaces
			if(this.categories[realIndex].type == 'wide') maxToShow -= 1;
			if(this.categories[realIndex].type == 'full') maxToShow -= 2;
		}
			
			
	},
	
	fetchElement_forCategory: function(category) {
		linkElement = new Element(
			category.href ? 'a' : 'div', 
			{
				href: category.href
		});
		
		linkElement.addClassName(category.type);
		
		imgElement = new Element('img', 
			{
			title: category.alt,
			alt: category.alt,
			src: '/images/sites/thinc/frontPage/' + category.imageName
		});
		
		linkElement.appendChild(imgElement);
		
		return linkElement;
	}
});
		
HorizontalScroll._events = new Class.create({
	flipLeft: function(evt) {
		this.updateFlipper(this.currentIndex - 3);
	},
	
	flipRight: function(evt) {
		this.updateFlipper(this.currentIndex + 3);
	}
});

Event.observe(window, 
			'load', 
			function() {
	var scroller = new HorizontalScroll($('mainPanel'));
});


/*
* Created : 3/17/2011
* Author  : pscott
* Purpose : a custom horizontal scroll bar class that can be attached to any element,
* 			it scrolls between the _target's child elements' left edge
*/
/*
function HorizontalScroll(_left, 
			_target, 
			_right){
	_left.observe('mousedown', 
			LeftPress);
	_right.observe('mousedown', 
			RightPress);
  
  //observe target for mouseover & mouseout events to invoke mousewheel & left/right arrow key movement
  _target.observe('mouseover', 
			StartListening);
  _target.observe('mouseout', 
			StopListening);
  
  function Scroll(move){
	  var wrapper = _target.down();
	  var children = wrapper.childElements();
	  
	  if(children.length > 1){
		  if(move < 0)
		  {
			  //remove last element and put it at the beginning
			  wrapper.insertBefore(children[children.length - 1].remove(), 
			wrapper.firstDescendant());
		  }
		  else if(move > 0)
		  {
			  //remove beginning element and put it at the end
			  wrapper.appendChild(children[0].remove());
		  }
	  }
  }
  
  function LeftPress(e){
    Scroll(-1);
    
    return e.stop();
  }
  
  function RightPress(e){
    Scroll(1);
    
    return e.stop();
  }
  
  function MouseWheel(e){
    e = e ? e : window.event;
    var movement = e.detail ? e.detail / -3 : e.wheelDelta/120;
    
    Scroll(-1 * movement);
    
    return e.stop();
  }

  function KeyPress(e){
      e = e ? e : window.event;
      var keyCode = e.which ? e.which : e.keyCode;

      //left arrow
      if(keyCode == 37)
          return LeftPress(e);

      //right arrow
      else if(keyCode == 39)
          return RightPress(e);
      
      return 0;
  }
  
  function StartListening(){
	  Event.observe(window, 
			'DOMMouseScroll', 
			MouseWheel);
	  Event.observe(document, 
			'mousewheel', 
			MouseWheel);

	  Event.observe(window, 
			'keydown', 
			KeyPress);
  }
   
  function StopListening(){
	  Event.stopObserving(window, 
			'DOMMouseScroll', 
			MouseWheel);
	  Event.stopObserving(document, 
			'mousewheel', 
			MouseWheel);
	
	  Event.stopObserving(window, 
			'keydown', 
			KeyPress);
  }
}
*/