// JavaScript Document
$(function(){
	
	// GAP DETECTION
	var bodyHeight = $("body").height()
	var viewportHeight = $(window).height()
	var gap = viewportHeight - bodyHeight -50
	
	// FILL THE GAP
	if (gap >= 0){
		$("#content-area").append("<div style='clear: both; height: "+ gap +"px;'></div>")
	}

	// SELECT FIRST THUMBNAIL FOR ACTIVE CLASS
	$(".slideImage.thumbnail1, .sliderThumbs  > .controls > .play").addClass("active")
	
	// PRELOAD
	$(window).load(function(){
	
		// MAIN SLIDER
		function cycleSlider(){
			$('.sliderFrame').cycle({ 
				fx:    'fade', 
				pause:  5,
				pager: '.sliderThumbs'
			});
		}
		
			// RUN THE FUNCTION WHEN PAGE IS LOADED
			cycleSlider()
		
			// PLAY
			$(".sliderThumbs  > .controls > .play").click(function(){
				// RESUME
				$(".sliderFrame").cycle('resume');
				
				// ADD PLAY BUTTON INDICATOR
				$(this).addClass("active")
				
				// REMOVE PAUSE BUTTON INDICATOR
				$(".sliderThumbs  > .controls > .pause").removeClass("active")
				
				// CLEAR OFF ANY OLD STYLES IN CASE WE WERE MANUALLY SELECTING
				// PICTURES WE WANT A FRESH START WHEN YOU HIT PLAY
				$(".slideImage").removeAttr('style')
				
				// RUN THE CYCLE FUNCTION AGAIN
				cycleSlider()
			});
			
			// PAUSE
			$(".sliderThumbs  > .controls > .pause").click(function(){
				// PAUSE
				$(".sliderFrame").cycle('pause');
				// ADD PAUSE BUTTON INDICATOR
				$(this).addClass("active")
				// REMOVE PLAY BUTTON INDICATOR
				$(".sliderThumbs  > .controls > .play").removeClass("active")
			});
		// END SLIDER
		
	})


	// MOVIE SLIDER
	var slider = $("#slideshow-area > .slideMovies")
	var slideControls = $("#slideshow-area > .sliderArrows")
	var sliderUp = $(".sliderArrows > .up")
	var sliderDown = $(".sliderArrows > .down")
	var slideshow = $("#slideshow-area")
	var curPos = 0;
	var movieCount = $(".slideMovies > .thumbnail").length
	var stopPos = 130 * movieCount - 360
	
	// SLIDE UP
	sliderUp.bind("click mouseenter", function(){
		if (curPos !== 0){//1440 for 15 VIDS
			slider.stop().animate({"top" : curPos = curPos +120},1000)
		}
	});
	
	// SLIDE DOWN
	sliderDown.bind("click mouseenter", function(){
		if (curPos >= -stopPos){
			slider.stop().animate({"top" : curPos = curPos -120},1000)
		}
	})
	
	// MOVIE THUMB CLICK FUNCTION
	var videoThumb = $(".slideMovies > .thumbnail", this)
	
	$(videoThumb).click(function(){
		var videoPath = $(this).attr('videoUrl')
		/*alert('videoUrl ' +  $(this).attr('videoPath'));*/
		
		// FADE IN THE PLAYER
		$("#overlay-frame, #overlay, #videoFrame").fadeIn(1000)
		$("#videoFrame").attr('src', videoPath)
	});
	
	// HIDE OVERLAY
	$("#overlay-frame").click(function(){
		// HIDES OVERLAY + FRAME + VIDEOFRAME
		$("#overlay-frame, #overlay, #videoFrame").fadeOut(1000)
		// CLEAR VIDEOS SRC AND STOPS A BUG WHERE SOUND
		// WOULD KEEP PLAYING AFTER WE CLOSED THE OVERLAY
		$("#videoFrame").attr('src', '')
	});
	
	// VIDEO GALLERY
	var vidGalleryThumb = $(".movie-thumbs > .movieShell > .thumbnail", this)
	
	$(vidGalleryThumb).click(function(){
		var videoPath = $(this).attr('videoUrl')
		/*alert('videoUrl ' +  $(this).attr('videoPath'));*/
		
		// FADE IN THE PLAYER
		$("#singlePlayer").attr('src', videoPath)
	});
	
	
	// MAIN SLIDER
	// THUMBNAILS FOR SLIDER
	var thumb = $(".sliderThumbs > .thumb")
	
	// THUMB HOVER ZOOM
	$(thumb, this).hover(function(){
		var thumbID = $(this).attr('id');
		$("#" + thumbID + " > .thumb-zoom").stop(true,true).fadeIn(500)
	},
	function(){
		var thumbID = $(this).attr('id');
		$("#" + thumbID + " > .thumb-zoom").stop(true,true).fadeOut(500)
	});

	
	// THUMBNAIL CLICK FUNCTION
	$(thumb, this).click(function(){
		// CLEAN OFF OLD STYLE FROM THE CYCLE PLUGIN
		$(".slideImage").stop().removeAttr('style')
		// PAUSE THE CYCLE PLUGIN
		$(".sliderFrame").cycle('pause');
		
		// ADD PAUSE BUTTON INDICATOR
		$(".sliderThumbs  > .controls > .pause").addClass("active")
		// REMOVE PLAY BUTTON INDICATOR
		$(".sliderThumbs  > .controls > .play").removeClass("active")
		
		if (!$(this).hasClass("activeSlide")){
		var thumbID = $(this).attr('id')
		
		// REMOVES ACTIVE CLASSES
			// THUMBNAIL
			$(".sliderThumbs > .thumb.activeSlide").removeClass("activeSlide")
			// SLIDE IMAGE
			$(".sliderFrame > .slide.active").removeClass("active").fadeOut(1000)
		
		// ADDS ACTIVE CLASSES
			// THUMBNAIL
			$(this).addClass("activeSlide")
			
			// SLIDE IMAGE
			$(".sliderFrame > .slide." + thumbID).fadeIn(500).addClass("active")
		}
	});
	
	// NAVIGATION
	$("#options-area, #slideshow-area, .navigation > li.footernav-models:not").mouseover(function(){
		$(".subNav.active").hide().removeClass("active")
	});
	
	$(".subNav.active").mouseleave(function(){
		$(this).hide().removeClass("active");
	});
	
	// MODELS
	$(".nav-models").mouseover(function(){
		$(".subNav.active").hide().removeClass("active");
		$(".subNav.models").show().addClass("active");
	});
	
	// GALLERIES
	$(".nav-galleries").mouseover(function(){
		$(".subNav.active").hide().removeClass("active");
		$(".subNav.galleries").show().addClass("active");
	});
	
	// LEGACY
	$(".nav-legacy").mouseover(function(){
		$(".subNav.active").hide().removeClass("active");
		$(".subNav.legacy").show().addClass("active");
	});
	
	
	// FOOTER NAV
	$("#footer-nav > li, #container").mouseover(function(){
		$(".footer-subNav.active").hide().removeClass("active");
	});
	
	$(".footernav-models").mouseover(function(){
		$(".footer-subNav.active").hide().removeClass("active")
		$(".footer-subNav.models").fadeIn(500).addClass("active")
	});



	// BUILD A BOAT STEPS
	var step = $(".steps > .stepArea > .stepFrame > .step", this)
	var activeStep = $(".steps > .stepArea > .stepFrame > .step.active")
	var progress = 0;
	
	// STEP THUMBNAIL
	$(step).click(function(){
		var stepID = $(this).attr('id')
		
		$(".step.active").removeClass("active")
		$(".step-content.active, .step-pictures.active,.step-view.active").fadeOut("fast").removeClass("active")			
		
		setTimeout(function(){
			$("#"+ stepID).addClass("active")
			$("."+ stepID +".step-content, ."+ stepID +".step-pictures, ."+ stepID +".step-view").addClass("active").fadeIn("fast")
		},250);
		
	});
	
	// SCROLL AREA
	$(".stepArea > .scrollUp").mouseenter(function(){
		if ($(".stepFrame").top !== 0){
			$(".stepFrame").animate({"top" : "0px"},500)
		}
	});
	
	// NEXT STEP
	$(".nextStep").click(function(){
		var stepName = $(".step.active").attr('id')
		var stepOffset = $(".stepFrame").position();
		
		switch(stepName){
			case 'step2':
				$(".step2.step-content,.step2.step-pictures,.step2.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step3").addClass("active")
					$(".step3.step-content,.step3.step-pictures,.step3.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;
			
			case 'step3':
				$(".step3.step-content,.step3.step-pictures,.step3.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step4").addClass("active")
					$(".step4.step-content,.step4.step-pictures,.step4.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;
			
			case 'step4':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step4.step-content,.step4.step-pictures,.step4.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step5").addClass("active")
					$(".step5.step-content,.step5.step-pictures,.step5.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;
			
			case 'step5':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step5.step-content,.step5.step-pictures,.step5.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step6").addClass("active")
					$(".step6.step-content,.step6.step-pictures,.step6.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;
			
			case 'step6':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step6.step-content,.step6.step-pictures,.step6.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step7").addClass("active")
					$(".step7.step-content,.step7.step-pictures,.step7.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			
			case 'step7':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step7.step-content,.step7.step-pictures,.step7.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step8").addClass("active")
					$(".step8.step-content,.step8.step-pictures,.step8.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			

			case 'step8':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step8.step-content,.step8.step-pictures,.step8.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step9").addClass("active")
					$(".step9.step-content,.step9.step-pictures,.step9.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			

			case 'step9':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step9.step-content,.step9.step-pictures,.step9.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step10").addClass("active")
					$(".step10.step-content,.step10.step-pictures,.step10.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			
			case 'step10':
				$(".stepFrame").animate({"top" : stepOffset.top - 86}, 500)
				$(".step10.step-content,.step10.step-pictures,.step10.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step11").addClass("active")
					$(".step11.step-content,.step11.step-pictures,.step11.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			
			case 'step11':
				$(".stepFrame").animate({"top" : "0px"}, 500)
				$(".step11.step-content,.step11.step-pictures,.step11.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step1").addClass("active")
					$(".step1.step-content,.step1.step-pictures,.step1.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
			break;			
			
			default:
				$(".step1.step-content,.step1.step-pictures,.step1.step-view").stop(true,true).fadeOut("fast").removeClass("active")
				$(".step.active").removeClass("active")
				
				setTimeout(function(){
					$("#step2").addClass("active")
					$(".step2.step-content,.step2.step-pictures,.step2.step-view").addClass("active").stop(true,true).fadeIn("fast")
				},250);
		}
	});
	
	
	
	// EVENTS
	var eventBox = $(".eventBox-frame > .eventScroll > .eventBox", this);
	var eventView = $(".eventBox-frame > .eventScroll");
	var eventScrollUp = $(".eventsView > .up");
	var eventScrollDown = $(".eventsView > .down");
	var eventCount = $(".eventBox-frame > .eventScroll > .eventBox").length;	
	var eventTotal = eventCount * 50 - 250 // 250 BECAUSE MY VIEW IS 240PX WITH 5PX TOP/BOTTOM
	var eventPos = 0;
	
	// SET EVENT 1 TO ACTIVE
	$(".eventContent.event1, #event1.eventBox").addClass("active");
	
	// EVENT THUMBNAIL CLICK
	$(eventBox).click(function(){
		var eventID = $(this).attr('id')
		
		$(".eventBox.active").removeClass("active")
		$(".eventContent.active").removeClass("active").fadeOut("fast")
		
		setTimeout(function(){
			$(".eventContent." + eventID).fadeIn("fast").addClass("active")
			$("#" + eventID + ".eventBox").addClass("active")
		},250)
	});
	
	// UP
	$(eventScrollUp).bind('click mouseover', function(){
		if (eventPos !== 0){
			eventView.stop(true,true).animate({"top" : eventPos = eventPos +50});
		}
	});
	
	// DOWN
	$(eventScrollDown).bind('click mouseover', function(){	
		if (eventPos >= -eventTotal){
			eventView.stop(true,true).animate({"top" : eventPos = eventPos -50});
		}
	});
	
	

});