// FancyPlayer.js - A spicy mix of FancyBox and Flowplayer

$(document).ready(function() {
	
	//Preload images to save on wait times
	function preloadImages() {
		for(var i = 0; i<arguments.length; i++) {
			$("<img>").attr("src", arguments[i]);
		}
	}

	preloadImages("images/video_bg.png");
	
	var videoclip='';
	var player='';
	
	$(".video_link").hover(function(){
		videoclip=$(this).attr('href');
		$(this).attr({"href":"#video_box"});
	},
	
	function(){
		$(this).attr({"href":""+videoclip+""});
	});
	


// *************************************************** ONCLICK: Create Title template, insert it and reize title, launch light box and or flowplayer  **********************************************

$('#mediaWall .mwBox a').live('click', function(event){
	
	//Grab the current image/video link Attributes
	//var class = $(this).attr('class');
	var myTitle = $(this).attr('title');
	var myURL = $(this).attr('name');
	
	//Create the title the output will depend on if the title has a link or not
	var outputString = "<span id=\"fancybox-title-wrap\"><span id=\"fancybox-title-left\"></span><span id=\"fancybox-title-main\"><h2>";
	if (myURL.length > 0) {
		outputString += "<a href=\"" + myURL + "\">";
	}
	outputString += myTitle;
	if (myURL.length > 0) {
		outputString += "</a>";
	}
	outputString += "</h2></span><span id=\"fancybox-title-right\"></span></span>";
	
	$('#fancy_title').html(outputString);
	
	//Check to see if the class of the link clicked is video_clip, if so then load the video configured light box, if not load the standard image lightbox
	if($(this).hasClass('video_link')){
		
		$(this).fancybox({
			'hideOnContentClick':false,
			'overlayOpacity' :.6,	
			'callbackOnStart' :function() { parallaxOn = false; },
			'callbackOnShow' :function(){
							player = $f("fancy_div",swfplayer,{
							play: {opacity:0},
							clip:{
								
								autoPlay:true,
								autoBuffering:true,
								url:videoclip,
								onStart:function(clip){
									var wrap=jQuery(this.getParent());						
								}
							},
							plugins: {
								controls: {
									backgroundColor: '#333333',
									backgroundGradient: 'none',
									volume: false,
									mute: true,
									time:false,
									stop:true,
									fullscreen:true,
									progressGradient: 'none',
									progressColor: '#9AB300',
									buttonColor: '#000000',
									buttonOverColor: '#9AB300',
									sliderColor: '#000000',
									bufferColor: '#000000',
									tooltipColor: '#9AB300'					
								}
							}
					});
					player.load();
					reSize('video');
									
					$('#fancybox-close').click(function(){
						$("#fancy_div_api").remove();
					});
				},
				'callbackOnClose':function(){
					$("#fancy_div_api").remove();
					parallaxOn = true;
				}
		}); 
	} else {
		$(this).fancybox({
				'hideOnContentClick' : false,
				'callbackOnStart' : function() {
					parallaxOn = false;
				},
				'callbackOnShow' :function(){ reSize('image'); },
				'callbackOnClose' : function() {
					parallaxOn = true;
				}
		});
	}
	
	event.preventDefault();
});

$('.lightboxVideo a').live('click', function(event){
	
	//Grab the current image/video link Attributes
	//var class = $(this).attr('class');
	var myTitle = $(this).attr('title');
	var myURL = $(this).attr('name');
	
	//Create the title the output will depend on if the title has a link or not
	var outputString = "<span id=\"fancybox-title-wrap\"><span id=\"fancybox-title-left\"></span><span id=\"fancybox-title-main\"><h2>";
	if (myURL.length > 0) {
		outputString += "<a href=\"" + myURL + "\">";
	}
	outputString += myTitle;
	if (myURL.length > 0) {
		outputString += "</a>";
	}
	outputString += "</h2></span><span id=\"fancybox-title-right\"></span></span>";
	
	$('#fancy_title').html(outputString);
	
	//Check to see if the class of the link clicked is video_clip, if so then load the video configured light box, if not load the standard image lightbox
	if($(this).hasClass('video_link')){
		
		$(this).fancybox({
			'hideOnContentClick':false,
			'overlayOpacity' :.6,	
			'callbackOnStart' :function() { parallaxOn = false; },
			'callbackOnShow' :function(){
							player = $f("fancy_div",swfplayer,{
							play: {opacity:0},
							clip:{
								
								autoPlay:true,
								autoBuffering:true,
								url:videoclip,
								onStart:function(clip){
									var wrap=jQuery(this.getParent());						
								}
							},
							plugins: {
								controls: {
									backgroundColor: '#333333',
									backgroundGradient: 'none',
									volume: false,
									mute: true,
									time:false,
									stop:true,
									fullscreen:true,
									progressGradient: 'none',
									progressColor: '#9AB300',
									buttonColor: '#000000',
									buttonOverColor: '#9AB300',
									sliderColor: '#000000',
									bufferColor: '#000000',
									tooltipColor: '#9AB300'					
								}
							}
					});
					player.load();
					reSize('video');
									
					$('#fancybox-close').click(function(){
						$("#fancy_div_api").remove();
					});
				},
				'callbackOnClose':function(){
					$("#fancy_div_api").remove();
					parallaxOn = true;
				}
		}); 
	} else {
		$(this).fancybox({
				'hideOnContentClick' : false,
				'callbackOnStart' : function() {
					parallaxOn = false;
				},
				'callbackOnShow' :function(){ reSize('image'); },
				'callbackOnClose' : function() {
					parallaxOn = true;
				}
		});
	}
	
	event.preventDefault();
});

	function reSize(type){
		if (type=="video") {
			if($('#fancy_inner').is(':visible')){
				var fancyOuterWidth = $('#fancy_inner').width();
				$('#fancy_title').width(fancyOuterWidth-20);
			}
		} else {
			if($('#fancy_content').is(':visible')){
				var fancyOuterWidth = $('#fancy_content').width();
				$('#fancy_title').width(fancyOuterWidth);
			}
		}
	}

  
});