$(function(){
	var tier_2 = new FrostSlider( "#navigation ul li.tier-2", "#navigation ul" );
	tier_2.init();
	var tier_3 = new FrostSlider( "#navigation ul ul li.tier-3", "#navigation ul ul" );
	tier_3.init();
});

function FrostSlider( abs_path, path ) {

	this.nav_real_width = 0;
	this.visible_nav = 0;
	this.total_elements = 0;
	this.start_point = 0;
	this.left_arrow = null
	this.right_arrow = null;
	
	this.abs_path = abs_path;
	this.path = path;
	
	this.init = function() {
		var _self = this;
		$( this.abs_path ).each(function(){
			_self.nav_real_width += $(this).width();
			_self.total_elements += 1;
		});
		
		if ( typeof $( this.path ).offset() == 'undefined' ) {
			return;
		}
		
		this.start_point = $( this.path ).offset().left;
		this.visible_nav = this.start_point + 928;
		
		if ( this.nav_real_width <= $("#navigation").width() ) {
			return;
		}
		
		this.left_arrow = this.AddArrow( String.fromCharCode( 171 ), {"left" : this.visible_nav + "px" } );
		this.right_arrow = this.AddArrow( String.fromCharCode( 187 ), {"left" : this.visible_nav + 20 + "px" } );
		this.VisibleElements();
		
		$(this.right_arrow).click(function(){
			$( _self.path ).animate( {"left" : "-=" + _self.NextElement() + "px" }, "slow", "", function(){
				_self.VisibleElements();
			});
		});
		$(this.left_arrow).click(function(){
			$( _self.path ).animate( {"left" : "+=" + _self.PrevElement() + "px" }, "slow", "", function(){
				if ( (_self.start_point - $(this).offset().left) <= 50 ) {
					$( _self.path ).animate( {"left" : "+=" + ( (_self.start_point - $(this).offset().left) + 1 ) + "px" }, "slow", "", function(){
					_self.VisibleElements();
					} );
				}
				  
				_self.VisibleElements();
				if ( $( _self.path).offset().left > _self.start_point ) {
					$( _self.path ).css( "left", "0px" );
				}
			} );
		});
	};
	
	this.NextPrevArrowCheck = function() {
		var _self = this;
		
		$(this.left_arrow).css( "background", "#F2F2F2" );
		$(this.right_arrow).css( "background", "#F2F2F2" );
		$( this.abs_path ).each(function(){
			if ( $(this).data("dino_hidden") == true &&
				 $(this).offset().left < _self.start_point ) {
				$(_self.left_arrow).css( "background", "#CDCDCD" );
			}
			if ( $(this).data("dino_hidden") == true && ( $(this).offset().left + $(this).width() ) > _self.visible_nav ) {
				$(_self.right_arrow).css( "background", "#CDCDCD" );
			}
		});
	};
	
	this.VisibleElements = function() {
		var _self = this;
		$( this.abs_path  ).each(function(){
			var leftPos = $(this).offset().left;
			if ( leftPos < _self.start_point || ( leftPos + $(this).width() ) > _self.visible_nav ) {
				$(this).data( "dino_hidden", true );
				$(this).css( "visibility", "hidden" );
			} else {
				$(this).data( "dino_hidden", false );
				$(this).css( "visibility", "visible" );
			}
		});
		
		this.NextPrevArrowCheck();
	};
	
	this.PrevElement = function() {
		var pos = 0, _self = this;
		$( this.abs_path ).each(function(){
			if ( 0 == pos && $(this).data("dino_hidden") == true ) {
				if ( ( $(this).offset().left ) < _self.start_point ) {
					pos = $(this).width();
				}
			}
		});
		
		return pos;
	};
	
	this.NextElement = function() {
		var pos = 0, _self = this;
		$( this.abs_path ).each(function(){
			if ( 0 == pos && $(this).data("dino_hidden") == true ) {
				if ( ( $(this).offset().left + $(this).width() ) > _self.visible_nav ) {
					pos = $(this).width();
				}
			}
		});
		
		return pos;
	};
	
	this.AddArrow = function( txt, params ) {
		var arrow = document.createElement( "div" );
	
		$(arrow).append( document.createTextNode( txt ) );
		$(arrow).css( "position", "absolute" );
		$(arrow).css( "top", $( this.path ).offset().top + "px" );
		$(arrow).css( "width", "20px" );
		$(arrow).css( "text-align", "center" );
		$(arrow).css( "padding-top", "5px" );
		$(arrow).css( "height", "22px" );
		$(arrow).css( "z-index", "10" );
		$(arrow).css( "cursor", "pointer" );
		$(arrow).css( "background", "#CDCDCD" );
		$(arrow).css( "color", "#666666" );
		
		for ( var i in params ) {
			$(arrow).css( i, params[i] );
		}
		
		$(document.body).append( $(arrow) );
		return $(arrow);
	};
	
}