/*
 * WHQ Slider Menu 1.0 by Sam Holton
 * 
 * USE: A horizontal scrolling menu.  
 */

//TO DO:

/*
 * create a stopping point.
 * make menu items update upon scroll
 * make sure subsequent next/previous clicks don't throw the menu off
 * 
 */

(function($){
	
	$.fn.slidemenu = function(options){
		
		var defaults = {
				item 		:	 $('.topic'),
				subItem 	:	 null,
				initIndex	:	 0,
				initMargin      :	 333,
				nextBtn		:	 $('.next'),
				prevBtn		:	 $('.previous'),
				menuItems	:	 null,
				scrollNum	:	 1
		}
		
		var options = $.extend(defaults, options); 
		
		var item = options.item;
		var subItem = options.subItem;
		var nextBtn = options.nextBtn;
		var prevBtn = options.prevBtn;
		var menuItems = options.menuItems;
		var scrollNum = options.scrollNum;
		
		var width = subItem ? subItem.width() : item.width();
		var index = options.initIndex;
		var initialMargin = options.initMargin;
		var totalTopics = item.size();

		var itemSpacing = Number(item.css('margin-right').replace('px',''));
	
		var target = this;
		var edgeWidth = 0;
		
		if(subItem){
			var totalItems = subItem.size();
		}
		
		var childrenNum = new Array();
		var moving = false;
		var parent;
		var thisLoader;
		
		
		return this.each(function(){
			// set initial margin and width
			target.css({
				'margin-left':initialMargin,
				'width':'20000px'
			});
			
			//find number of sub-topics in each topic, if any
			if(subItem){
				item.each(function(index){
					childrenNum.push($(this).find('.'+subItem.attr('class')).size());
				});
			}else{
				item.each(function(index){
					childrenNum.push($(this).find('.'+item.attr('class')).size());
				});
			}
			
			//assign next and previous button events
			if(nextBtn){
				nextBtn.click(function(){
					scrollNext(target, ($('.'+item.attr("class")+':eq('+index+')').width()+itemSpacing)*scrollNum);
				});
			}
			if(prevBtn){
				prevBtn.click(function(){
					scrollPrevious(target, ($('.'+item.attr("class")+':eq('+(index-1)+')').width()+itemSpacing)*scrollNum);
				});
			}
			
			//keyboard commands
			$(document).keydown(function(e){
				//alert(index);
				switch(e.keyCode){
				
				case 40:
					scrollDown(e);
					break;
				
				case 39:
					e.preventDefault();
					//if(!moving){
                                               // $('.instructions').fadeOut();
						//scrollNext(target, ($('.'+item.attr("class")+':eq('+index+')').width()+itemSpacing)*scrollNum);
					//}
					break;
				
				case 38:
					scrollUp(e);
					break;
				
				case 37:
					e.preventDefault();
					//if(!moving){
					//	scrollPrevious(target, ($('.'+item.attr("class")+':eq('+(index-1)+')').width()+itemSpacing)*scrollNum);
					///}
					break;
					
				}
			})
			$(document).keypress(function(e){
				switch(e.keyCode){
				
				case 40:
					e.preventDefault();
					break;
				
				case 39:
					e.preventDefault();
					break;
				
				case 38:
					e.preventDefault();
					break;
				
				case 37:
					e.preventDefault();
					break;
					
				}
			})

			//for each image in target container
			target.find('img').each(function(){
				parent = $(this).parent();
				
				//set image's parent position to relative
				parent.css('position','relative');
				//add loader div to parent div
				parent.append('<div class="loader"></div>');
				//set loader div position to middle
				parent.children('.loader').css('top', (parent.height()/2) - (parent.children('.loader').height()/2));
				parent.children('.loader').css('left', (parent.width()/2) - (parent.children('.loader').width()/2));
				
				//when image loads, display image
				$(this).load(function(){
					displayImage($(this));
				});
			});
			
			
			//if load event doesn't fire, display images when page is loaded.
			$(window).load(function(){
				target.find('img').each(function(){
					if($(this).css('visibility') == 'hidden'){
						displayImage($(this));
					}
				});
				setTimeout(function(){
					init();
                                        adjustWidth();
				}, 1500);
				
			});
			
			function init(){
				//alert('init');
				if(menuItems){
					//menuItems.each(function(index){
						//alert('now');
						menuItems.click(function(){
							index = menuItems.index($(this));
							
							menuItems.attr('class','');
							$(this).attr('class','selected');
							
							menuItems.parent().find('.selected').attr('class','');
							scrollTo(target, (width+40), index);
							$(this).attr('class','selected');
							
						});
					
					//})
				}
			}
			
			function displayImage(_img){
				
				thisLoader = _img.parent().children('.loader');
				
				_img.css('visibility','visible');
				_img.css('display','none');
				thisLoader.css('display','none');
				_img.fadeIn();
				
				//set target width to fit content
				adjustWidth();
				
			}
			
			function scrollNext(_container, _scrollDistance){

                                _container = $('body');

				
					
					//var currentMargin = Number(_container.css('margin-left').replace('px',''));

					
						
						_container.animate({
							scrollLeft: (-_scrollDistance)
							},500, function(){moving = false});

                                                        
						index++;

                                                  
						
					
					
					
				
			}
			
			function scrollPrevious(_container, _scrollDistance){
				_container = $('body');


					
					index--;

                                        
				
					_container.animate({
						scrollLeft: initialMargin
						},500, function(){moving = false});
				
			}
			
			function scrollTo(_container, _scrollDistance, _index){
                                if($.browser.safari || $.browser.chrome){
                                    _container = $('body');
                                }else{
                                    _container = $('html');
                                }
                                
				//alert(_scrollDistance);
				var totalIndex = 0;
				moving = true;
				
				for (var i=0; i < childrenNum.length; i++){
					
					if(i < _index){
						totalIndex += childrenNum[i];
					}
				}
				
				
				_scrollDistance = 686;

				_container.animate({
					scrollLeft: ((_scrollDistance * (_index)))
                                	},'slow', function(){moving = false; });
				
				index = _index;
			}
			
			function scrollDown(e){
				e.preventDefault();
				
				$('html, body').animate({
					scrollTop:$(document).height()-$(window).height()
				}, 500);
			}
			
			function scrollUp(e){
				e.preventDefault();
				
				$('html, body').animate({
					scrollTop:0
				}, 500);
			}
			
			
			
			function adjustWidth(){
				var contentWidth = 0;
				
				item.each(function(index){
					contentWidth += $(this).width() + Number($(this).css('margin-right').replace('px',''));
				});
				//contentWidth += initialMargin;
				
				target.css('width', contentWidth+'px');
				
				
				//set initial Margin
				//target.css('margin-left', initialMargin);
				
				
				
				if(target.width() + initialMargin <= $(window).width()){
					$('#content').css('width','100%');
				}
			}
			
		});
	}
	
})(jQuery);

//-----------------------------------------------------------------------------------------------------------------------------------