// JavaScript Document
var panelset = new Object;
panelset.panel = Array();
panelset.spot = Array();

var current_spot = "";
var current_panel = "";

var continue_mode = true;

// when the DOM is ready...
$(document).ready(function () {
	var $panels = $('#slider .scrollContainer > div');
	var $container = $('#slider .scrollContainer');
	
	var horizontal = true;	// if false, we'll float all the panels left and fix the width of the container
	
	// float the panels left if we're going horizontal
	if (horizontal) {
		$panels.css({ 	'float' : 'left', 'position' : 'relative' }); // IE fix to ensure overflow is hidden
		$container.css('width', $panels[0].offsetWidth * $panels.length);	// calculate a new width for the container (so it holds all panels)
	}
	
	// collect the scroll object, at the same time apply the hidden overflow to remove the default scrollbars that will appear
	var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	
	// apply our left + right buttons
	$scroll
	.before('<img class="scrollButtons left" src="./resources/images/scroll_left.png" />')
	.after('<img class="scrollButtons right" src="./resources/images/scroll_right.png" />');
	
	
	//-------------------------------------------------------------------------------------------------------------
	//-------------------------------------------------------------------------------------------------------------
	function panelClose(){
		if(current_panel == "") return;
		if(current_panel == "#directors" ) return;
		
		if(panelset.panel.length > 0){
			var _pos = panelset.panel.inArray(current_panel);
		} else {
			var _pos = -1;
		}
		
		if(_pos != -1){
			panelset.spot[_pos] = current_spot;
		} else {
			panelset.panel.push(current_panel);
			panelset.spot.push(current_spot);
		}
		
		return;
	}
	
	function setSpot(){
		//current_spot = 
	}
	//-------------------------------------------------------------------------------------------------------------
	// handle nav selection
	//-------------------------------------------------------------------------------------------------------------
	function selectNav() {
							$(this)
								.parents('ul:first')
								.find('a')
								.removeClass('selected')
								.end()
								.end()
								.addClass('selected');
		
		panelClose();
		
		
		current_panel = $(this).attr("href");
		
		
		if(current_panel != "#directors"){
			$("#pid").html(current_panel);
			//current_panel = $(current_panel);
		
				//reset the spot detail html to show the image for the current spot
		
				var holder_img_src = 'http://mjz-api.wiredrive.com/wdimage_416x328_' + current_spot + '.jpg';
				
				if(current_spot != ""){
					$("#movie1",('#sd'+current_spot)).remove();
					$("#movie1_img",('#sd'+current_spot)).remove();
					$('#sd'+current_spot).prepend('<a href="#'+current_spot+'" id="movie1_img"><div class="qt_holder" ><img src="http://mjz-api.wiredrive.com/wdimage_416x328_' + current_spot + '.jpg" width="416" /></div></a>');
					$('#movie1_img', ('#sd'+current_spot)).click( function(){
													var my_spot = $(this).attr("href");
													$($(my_spot).parent()).click();				
																		});
				}	
		}
	}
	//-------------------------------------------------------------------------------------------------------------
	$('#slider .navigation').find('a').click(selectNav);
	
	// go find the navigation link that has this target and select the nav
	function trigger(data) {
		//is the panel in the array?
		if(panelset.panel.length > 0){
			var _pos = panelset.panel.inArray(current_panel);
		} else {
			var _pos = -1;
		}
		
		if(_pos == -1){
			var my_spot = $(".spot:first", $(current_panel));
			$($(my_spot).parent()).click();
		} else {
			var my_spot = panelset.spot[_pos];
		}	
	}
	
	if (window.location.hash) {
		trigger({ id : window.location.hash.substr(1) });
	} else {
		$('ul.navigation a:first').click();
	}
	
	var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('margin-left')) || 0) * -1;
	
	offset = -20;
	
	
	var scrollOptions = {
		target: $scroll,						// the element that has the overflow
		items: $panels,							// can be a selector which will be relative to the target
		navigation: '.navigation a',
		prev: 'img.left',  next: 'img.right',	// selectors are NOT relative to document, i.e. make sure they're unique
		axis: 'xy',								// allow the scroll effect to run both directions
		onAfter: trigger, 						// our final callback
		offset: offset,
		duration: 500,							// duration of the sliding effect
		easing: 'swing'							// easing - can be used with the easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
	};
	
	// apply serialScroll to the slider - we chose this plugin because it supports// the indexed next and previous scroll along with hooking in to our navigation.
	$('#slider').serialScroll(scrollOptions);
	
	$.localScroll(scrollOptions);	// now apply localScroll to hook any other arbitrary links to trigger the effect
	
	// finally, if the URL has a hash, move the slider in to position, setting the duration to 1 because I don't want it to scroll in the
	// very first page load.  We don't always need this, but it ensures the positioning is absolutely spot on when the pages loads.
	scrollOptions.duration = 1;
	
	$.localScroll.hash(scrollOptions);
    
    
	 //---------------------------------------------------------------------------
	 // add the quicktime listeners
	 //---------------------------------------------------------------------------
	function myAddListener(obj, evt, handler, captures) {
		if(continue_mode){
			if ( document.addEventListener ) obj.addEventListener(evt, handler, captures);
			else obj.attachEvent('on' + evt, handler); // IE
		}
	}
    
	//---------------------------------------------------------------------------
	// define functions that register each listener
	//---------------------------------------------------------------------------
	function RegisterListener(eventName, objID, embedID, listenerFcn) {
		var obj = document.getElementById(objID);
		if ( !obj ) obj = document.getElementById(embedID);
		if ( obj ) myAddListener(obj, eventName, listenerFcn, false);
	}
	
	function movieEnded(){
		if(continue_mode){
			//get the next movie
			var c_spot = $(("#"+current_spot), $(current_panel));
			var next_spot_a = $($(c_spot).parent()).next();
			var next_class = (next_spot_a).attr("class");
			if(next_class == "credits"){
				next_spot_a = $(next_spot_a).next();
				$(next_spot_a).click();
			} else {
				$(next_spot_a).click();
			}
			
		}
	}
		

	
	//---------------------------------------------------------------------------
	// define a single function that registers all listeners to call onload 
	//---------------------------------------------------------------------------
	function RegisterListeners() {
		RegisterListener('qt_ended', 'movie1', 'qtmovie_embed', movieEnded);
	}
	
	//---------------------------------------------------------------------------
	// assign the click events to the menu items
	//---------------------------------------------------------------------------
	$("a", ".spot_menu").click( function(){
		var spot_id = $('.spot', this).attr('id');	//get the spot id
		
		current_spot = spot_id;
		
		$('a', $($(this).parent()).parent()).removeClass('select');	//remove the previous selected item
		$(this).addClass('select');					//add the selection to my item
		
		$('.spot_detail', $($(this).parent()).parent() ).attr({'id':'sd'+spot_id});
		$('.spot_detail', $($(this).parent()).parent() ).attr({'sid':spot_id});
		
		$('.spot_detail', $($(this).parent()).parent() ).load("spot_details.php?id="+spot_id, {}, function(){
				var pid = $(this).attr("sid");
				$(".stitle", $(this)).html($(".stitle",  $("#"+pid)).html());
				$(".client", $(this)).html($(".client", $("#"+pid)).html());
				$('.spotcredits', $(this)).html($('#c_' + pid).html());
				RegisterListeners();				
			});
	});
	
	function togglePlayMode(){
		if(continue_mode){
			$(".continuous_play").addClass("single");
			continue_mode = false;
		} else {
			$(".continuous_play").removeClass("single");
			continue_mode = true;
		}	
	}
	$(".continuous_play").click(function(){ togglePlayMode(); })
											  
   // window resize funciton ----------------------------------------------------------------------------------------------------
   $(window).resize(function () {
			
    });
    
});

Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return i;
		}
	}
	return -1;
};