$(document).ready(function(){
		
		
		
		$('.nav-container:not(.active)').mouseenter(function(){
				$(this).find('.nav-hover').animate({
					top: '-1px'
				}, {duration: 300, queue: false});
				$(this).find('.nav-text').animate({
					'margin-top': '18px'
				}, {duration: 300, queue: false});
		}).mouseleave(function(){
				$(this).find('.nav-hover').animate({
					top: '-60px'
				}, {duration: 300, queue: false});
				$(this).find('.nav-text').animate({
					'margin-top': '34px'
				}, {duration: 300, queue: false});
		});
		
		if($.browser.msie && parseInt($.browser.version, 10) < 8){
			var option = {
				x:      0, 
				y:      2, 
				radius: 3,
				color:  "#333333"
			}
	
			$(".nav-text, .brand-header").textShadow( option );
			
			var option2 = {
				x:      0, 
				y:      3, 
				radius: 5,
				color:  "#000000"
			}
			
			$(".sp-banner-contract").textShadow( option2 );
		} else if ($.browser.msie && parseInt($.browser.version, 10) >= 8){
			var option = {
				x:      0, 
				y:      0, 
				radius: 3,
				color:  "#333333"
			}
	
			$(".nav-text, .brand-header").textShadow( option );
			
			var option2 = {
				x:      0, 
				y:      0, 
				radius: 5,
				color:  "#000000"
			}
			
			$(".sp-banner-contract").textShadow( option2 );
		}
		
		
		function hoverOut($this){
			if(!($this.hasClass("active"))){
				if(!$.browser.msie || parseInt($.browser.version, 10) >= 9){
					$this.find('img.bin').animate({
						'margin-top': '0px'
					}, {duration: 300, queue: false});
					$this.find('img.shadow').animate({
						opacity: 1
					}, {duration: 400, queue: false});
				} else {
					$this.find('img.bin').animate({
						'margin-top': '0px'
					}, {duration: 300, queue: false});
					$this.find('img.shadow').animate({
						width: '120%',
						left: -30
					}, {duration: 400, queue: false});
				}
			}
		}
		
		$.fn.animateOut = function(brand) {
			$(this).css("z-index","0");
    		$(this).find('.brand-header').animate({
				top: '-90px'
			}, {duration: 600, queue: false});
			$(this).find('.brand-content').animate({
				bottom: '-375px'
			}, {duration: 600, queue: false, complete: function(){
				$('.brand-' + brand + '').animateIn();	
			}});
		}
		
		
		$.fn.animateIn = function() {
			$(this).css("z-index","5"); 
    		$(this).find('.brand-header').animate({
				top: '0px'
			}, {duration: 300, queue: false});
			$(this).find('.brand-content').animate({
				bottom: '0px'
			}, {duration: 400, queue: false});
			$('#brand-content div.active').removeClass("active");
			$(this).addClass("active");
			$('#brand-content-container').removeClass("trans");
		}
		
		//rotate content
		function rotateContent(brand){
			//alert(brand);
			$('#brand-content-container').addClass("trans");
			$('#brand-content div.active').animateOut(brand);
			
			
		}
		
		if(parseInt($.browser.version, 10) < 9){
			$('#brand-bins li:not(.bin-separator)').append('<img class="shadow" src="images/bin-shadow-lg.png" alt="" />');
		} else {
			$('#brand-bins li:not(.bin-separator)').append('<img class="shadow" src="images/bin-shadow-lg.png" alt="" />');
			$('#brand-bins li:not(.active) img.shadow').css({opacity: 0.6});
		}
		
		//handle hovers
		$('#brand-bins li:not(.bin-separator)').mouseenter(function(){
			if(!$(this).hasClass("active")){
				if(!$.browser.msie || parseInt($.browser.version, 10) >= 9){
					$(this).find('img.bin').animate({
						'margin-top': '-20px'
					}, {duration: 300, queue: false});
					$(this).find('img.shadow').animate({
						opacity: 0.1
					}, {duration: 300, queue: false});
				} else {
					$(this).find('img.bin').animate({
						'margin-top': '-20px'
					}, {duration: 300, queue: false});
					$(this).find('img.shadow').animate({
						width: '75%',
						left: 35
					}, {duration: 300, queue: false});
				}
			}
		}).mouseleave(function(){
			var $this = $(this);
			hoverOut($this);
		});
		
		//handle clicks
		$('#brand-bins li:not(.bin-separator):not(.active)').live('click', function(){
			
			if(!$('#brand-content-container').hasClass("trans")){
				//rotate brand content
				var brand = $(this).attr("id");
				rotateContent(brand);
				
				//zoom out
				$('#brand-bins li.active').animate({
					width: '277px',
					height: '191px',
					'padding-top': '20px'
				}, {duration: 400, queue: false, complete: function(){
					//remove classes
					$(this).removeClass("active");
				}});
				
				//zoom in
				var $this = $(this);
				hoverOut($this);
				$(this).animate({
					width: '337px',
					height: '233px',
					'padding-top': '0px'
				}, {duration: 400, queue: false, complete: function(){
					//add classes
					$(this).addClass("active");
				}});
			}
		});
		
		
	});