/* =========================================================

// jquery.simpleoverlay.js

// Datum: 2011-06-03
// Author: Andrew Vergara
// Mail: drewvergara@gmail.com
// Web: http://www.drewvergara.com
// Requires: jQuery v1.2.6 or later

// SimpleOverlay is a small plugin for the jQuery-JavaScript-Library. It is an overlay that loads in html via an ajax request.
// SimpleOverlay reacts to a click event of the choosen selector.
// This plugin has been edited to fit the conditions of ACTV

//USE THESE SYTLES AS A REFERENCE OR INSERT INTO YOUR CSS.  NOTE THAT RBGA IS NOT SUPPORTED IN INTERNET EXPLORER 
* #overlay{
* 	width: 100%;
* 	min-height: 100%;
* 	position: fixed;
* 	top: 0;
* 	left: 0;
* 	z-index: 1000;
* 	background: rgba(0,0,0,0.8);
* 	text-align: center;
* }
* 		
* #overlay_container{
* 	opacity: 1.0;
* 	z-index: 1001;
* }
* 
* 	a.close-overlay{
* 		position: relative;
* 		top: -436px;
* 		left: 415px;
* 	}


// IE HACK TO HAVE RGBA SUPPORTED 
* <!--[if IE]>
* 
*    <style type="text/css">
* 
*    .color-block {
*        background:transparent;
*        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaRRGGBB,endColorstr=#aaRRGGBB);
*        zoom: 1;
*     } 
* 
*     </style>
* 
*  <![endif]-->

// ========================================================= */


(function($) {

    $.fn.simpleoverlay = function(options) {
        return this.each(function() {   
            $.simpleoverlay(this, options);
        });
    };

    $.simpleoverlay = function(container, options) {
        var settings = {
            'inspeed':'normal',
            'outspeed':'normal',
			'loaddata':null, 
            'closebutton':null
        };

        if (options)
            $.extend(settings, options);


		//MAIN FUNCTION THAT TRIGGERS THE OVERLAY
		$(container).click(function (){
			
			var self = $(this);

			var elementTotal = $(this).parents('div.row').find(".item").length;
			var elementIndex = $(this).parent("li").index() + 1;
			
			var frameData = $(this).parent().find('img').attr('class');
			var sourceArray = frameData.split(' ');
			var sourceName = sourceArray[0];
			var sourcefolder = sourceArray[1];
			var sourceType = sourceArray[2];
						
			var dataView;
			
			var campaignRole = $(this).find($('li.role'));
			var campaignData = $(this).find($('li.campaign'));
			var commentaryHeading = $(this).find($('li.commentary-heading'));
			var commentaryDescription = $(this).find($('li.commentary-description'));
			
			var campaignCommentaryHeading;
			var campaignCommentaryDescription;
			
			if(commentaryHeading[0] != null){
     			campaignCommentaryHeading = commentaryHeading[0].innerHTML;
     			campaignCommentaryDescription = commentaryDescription[0].innerHTML;
			}else{
     			campaignCommentaryHeading = " ";
     			campaignCommentaryDescription = " ";
			}
			
			$('body').append('<div id="overlay" style="display:none;"><div id="overlay-container-bg"><img src="images/ui/overlay-bg.png" /></div></div>');
			
			fillOverlay();
			function fillOverlay(){
				$('#overlay').append('<div id="overlay_container"></div>'); 
				$('#overlay').fadeIn(settings.inSpeed, function (){
	     			$('#overlay_container').append('<a href="" class="close-overlay"><img src="images/ui/overlay-close.png"/></a>');
					$('#overlay_container').append('<a href="" class="left-overlay"><img src="images/ui/left-arrow.png"/></a>');
					$('#overlay_container').append('<a href="" class="right-overlay"><img src="images/ui/right-arrow.png"/></a>');
										
					if (elementIndex == 1){
						$('.left-overlay').css('visibility', 'hidden');	
					}else {
						$('.left-overlay').css('visibility', 'visible');
					}

					if (elementIndex == elementTotal){
						$('.right-overlay').css('visibility', 'hidden');	
					}else {
						$('.right-overlay').css('visibility', 'visible');
					}
					
					$('#overlay_container').append('<div class="top-overlay"><p class="overlay-title">' + campaignData[0].innerHTML + '</p><p class="overlay-role">' + campaignRole[0].innerHTML + '</p></div><div class="middle-overlay"><img style="margin-top:307px;" id="loader_img" src="images/ui/ajax-loader.gif"/></div><!--div class="bottom-overlay"><p class="overlay-title">' + campaignCommentaryHeading + '</p><p class="overlay-role">' + campaignCommentaryDescription + '</p></div-->');

					var imgLocation = 'images/' + sourcefolder + '/frames/' + sourceName + '.png';

					if (sourceType == "swf"){
						$('img#loader_img').hide();
		     			dataView = '<embed style="margin-top: 175px;" src="swf/' + sourceName + '.swf' + '" height=250 width=300></embed>';
					}else{
		     			dataView = '<img style="display:none;" id="overlay_img" src="images/' + sourcefolder + '/frames/' + sourceName + '.png"/>';
					}

					if (sourceType == "video"){
						$('img#loader_img').hide();
						dataView = '<video style="margin-top: 150px; background: #000;" width="640" height="320" controls="control"><source src="video/' + sourceName + '.mp4" type="video/mp4" preload="preload"><source src="video/' + sourceName + '.ogv" type="video/ogg" preload="preload"><source src="video/' + sourceName + '.webm" type="video/webm" preload="preload"></video>';
					}
				
					$('.middle-overlay').append(dataView);
				
					$.get(imgLocation, function(data){					
						setTimeout(getImgData, 1000);					
					});

					function getImgData(){
						var imgSize = $('img#overlay_img');
						var imgHeight = imgSize.height();
						$('img#loader_img').hide();
						imgSize.show();
						var centerMath = 323 - (imgHeight / 2);
						$('#overlay_img').css('margin-top', centerMath);						
					}

					$('#overlay_container').append('<p class="overlay-count">' + elementIndex + ' OF ' + elementTotal + '</p>');
					
					$("a.close-overlay").click(function(){
						$('#overlay').fadeOut(settings.outSpeed, function (){
							$('#overlay').remove();
						});
					 	return false;
					});
					
					$("a.right-overlay").click(function(){
						$('#overlay_container').fadeOut(settings.outSpeed, function (){
							self = self.parent().next().find('div.item');							
							
							elementIndex = elementIndex + 1;
														
							frameData = self.parent().find('img').attr('class');
							sourceArray = frameData.split(' ');
							sourceName = sourceArray[0];
							sourcefolder = sourceArray[1];
							sourceType = sourceArray[2];

							campaignRole = self.find($('li.role'));
							campaignData = self.find($('li.campaign'));
							commentaryHeading = self.find($('li.commentary-heading'));
							commentaryDescription = self.find($('li.commentary-description'));

							campaignCommentaryHeading;
							campaignCommentaryDescription;

							if(commentaryHeading[0] != null){
				     			campaignCommentaryHeading = commentaryHeading[0].innerHTML;
				     			campaignCommentaryDescription = commentaryDescription[0].innerHTML;
							}else{
				     			campaignCommentaryHeading = " ";
				     			campaignCommentaryDescription = " ";
							}
							$('#overlay_container').remove();					
							fillOverlay();
						});
					 	return false;
					});					

					$("a.left-overlay").click(function(){
						$('#overlay_container').fadeOut(settings.outSpeed, function (){
							self = self.parent().prev().find('div.item');							
							
							elementIndex = elementIndex - 1;
														
							frameData = self.parent().find('img').attr('class');
							sourceArray = frameData.split(' ');
							sourceName = sourceArray[0];
							sourcefolder = sourceArray[1];
							sourceType = sourceArray[2];

							campaignRole = self.find($('li.role'));
							campaignData = self.find($('li.campaign'));
							commentaryHeading = self.find($('li.commentary-heading'));
							commentaryDescription = self.find($('li.commentary-description'));

							campaignCommentaryHeading;
							campaignCommentaryDescription;

							if(commentaryHeading[0] != null){
				     			campaignCommentaryHeading = commentaryHeading[0].innerHTML;
				     			campaignCommentaryDescription = commentaryDescription[0].innerHTML;
							}else{
				     			campaignCommentaryHeading = " ";
				     			campaignCommentaryDescription = " ";
							}
							$('#overlay_container').remove();					
							fillOverlay();
						});
					 	return false;
					});					
					
				});

			}

			return false;
		});

	};

})(jQuery);