//--> window jack <--//
//--> author - Noel Hougland (noel@eroi.com) <--//

$(document).ready(function(){
	// default settings --> if not defined when making call
    $animationSpeed_1 = 350;
    $animationSpeed_2 = 350;
    $animationDelay = 600;
    $defaultTheme = "default";
    $defaultAnimation = "fade-fade";
    $defaultOpacity = 0.7;
	
	$window_jack = function (contentParams, contentPath, contentTitle) {  //--> window-jack class
		//--> set window jack variables
		$lastChar = contentParams.substring(contentParams.length, contentParams.length - 1);
		if($lastChar == ":"){                                    //--> if last character is ":" strip it
			contentParams = contentParams.substring(0, contentParams.length - 1);
		}
		$exploded = contentParams.split(':');
	    this.type = $exploded[0];
	    this.theme = ($exploded[1] != undefined) ? $exploded[1] : $defaultTheme;
	    this.width = $exploded[2];
	    this.height = $exploded[3];  
	    this.title = contentTitle;
	    this.path = contentPath;
		this.animation = ($exploded[4] != undefined) ? $exploded[4] : $defaultAnimation;
		this.opacity = ($exploded[5] != undefined) ? $exploded[5] : $defaultOpacity;
		$animationTypeExploded = this.animation.split('-');
	    this.animationType1 = $animationTypeExploded[0];
		this.animationType2 = $animationTypeExploded[1];
		//--> call functions (methods)
        this.add_css("themes/" +  this.theme + "/css/" + this.theme + ".css");	
		this.create_window_jack();		
		this.adjust_window_jack();
		this.animate_window_jack();
		if(this.type == 'slideshow'){
			this.window_jack_slideshow(); //--> if type is slideshow call function
		}else if(this.type == 'htmlblock'){
			this.window_jack_htmlblock(); //--> if type is slideshow call function
		}
		if(this.theme == "peephole"){ //--> if theme is peephole round edges based on longest side
			$curveSize = 0;
			if(this.height > this.width){
				$curveSize = this.height;
			}else if(this.width > this.height){
				$curveSize = this.width;
			}else{
				$curveSize = this.height;
			}
		    $roundedCornersContainer = (($curveSize / 2) + 20);
		    $roundedCorners = ($curveSize / 2);
		    $("#window-jack-container").css('-moz-border-radius', $roundedCornersContainer);
		    $("#window-jack-container").css('-webkit-border-radius', $roundedCornersContainer);
			$("#window-jack-container div").css('-moz-border-radius', $roundedCorners);
			$("#window-jack-container div").css('-webkit-border-radius', $roundedCorners);
		}	
	}  
	
	
	$window_jack.prototype.create_window_jack = function (){	//--> create and add window-jack to window
		$window_jack_box = "";	
		$window_jack_box += "<div id='window-jack-wrapper' >";
		$window_jack_box += "	<div id='window-jack-overlay' style='display:none;'></div>";	
		$window_jack_box += "	<div id='window-jack-container' style='display:none; z-index: 100000'>";
		$window_jack_box += "	<div id='window-jack-title'>" + this.title + "</div>";
		$window_jack_box += "	<div id='window-jack-media' style='z-index: 10000; width:" + this.width  + "px; height:" + this.height  + "px;'>";
		switch(this.type) {
		   case 'image':
		       if(this.theme == "peephole" || this.theme == "future"){  //--> rounded corners (peephole theme) only work if image is applied as background-image
			       $window_jack_box += "<div style='background-image:url(" + this.path + "); width:" + this.width  + "px; height:" + this.height  + "px;' />";
		       }else{
			       $window_jack_box += "<a href='http://ax.itunes.apple.com/us/app/vivmag-magazine/id396041779?mt=8#ls=1' target='_blank'><img src='" + this.path + "' width='" + this.width + "' height='" + this.height + "'  style='border:0px;' /></a>";
		       }
		     $window_jack_box += "	</div>";
	         break;
	       case 'slideshow':
			       $window_jack_box += "	</div>";
			       $window_jack_box += "  	<div id='window-jack-controls'><a href='#' id='prev-btn'>previous</a> | <a href='#' id='next-btn'>next</a></div>";
		        break;
	        case 'iframe':
	            $window_jack_box += "<iframe src='" + this.path + "' width='" + this.width + "' height='" + this.height + "' />";
	            $window_jack_box += "	</div>";      
	            break;
	    	case 'htmlblock': 
	            $window_jack_box += "	</div>";
	            break;
	        case 'video': 
	            //alert("video is not yet supported");
	            $window_jack_box += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" style="position:relative;display:block;width:' + this.width + 'px;height:' + this.height + 'px">';
				$window_jack_box += '<param name="movie" value="swf/switchbox-player.swf?videoPath=' + this.path + '">';
				$window_jack_box += '<param name="quality" value="high" />';
				$window_jack_box +='<param name="scale" value="default" />';
				$window_jack_box +='<param name="wmode" value="window" />';  
				$window_jack_box +='<param name="allowFullScreen" value="true" />'; 
				$window_jack_box += '<param name="AllowScriptAccess" VALUE="always" />';
				$window_jack_box += '<embed src="swf/switchbox-player.swf" AllowScriptAccess="always" wmode="window" allowFullScreen="true" scale="default" FLASHVARS="videoPath=' + this.path + '" style="position:relative;display:block;width:' + this.width + 'px;height:' + this.height + 'px">'
				$window_jack_box += '</object>';
	            $window_jack_box += "	</div>";
	            break;
		    case 'custom': 
		        $window_jack_box += "<div style='width:" + this.width  + "px; height:" + this.height  + "px;'>";
		        $window_jack_box += "<iframe src='" + this.path + "' width='" + this.width + "' height='" + this.height + "' />";
				$window_jack_box += "  	<div id='window-jack-controls'><a href='#' id='prev-btn'>&laquo; previous</a> | <a href='#' id='next-btn'>next &raquo;</a></div>";           
				$window_jack_box += "	</div>";
				$window_jack_box += "	</div>";
				this.add_window_jack_script('scripts/site-tour.js');
		        break;
	     }	
	    $window_jack_box += "  	<a href='#' id='window-jack-close-btn' ></a>"; //javascript:void(0);
		$window_jack_box += "	</div>";	
		$window_jack_box += "</div>";
		
		$("body").append($window_jack_box);	//-> add window-jack to body element
		
		$("#window-jack-close-btn").click(function(){
			$('#window-jack-wrapper').fadeOut(function(){   //--> fade out window-jack
			    $("#window-jack-wrapper").remove();         //--> remove window-jack
			    $("#window-jack-css-theme").remove();       //--> remove css theme
			    $("#window-jack-css-script").remove();      //--> remove any window-jack additional scripts
			});
			return false;
		});	
		
		$("#window-jack-overlay").click(function(){
			$('#window-jack-wrapper').fadeOut(function(){   //--> fade out window-jack
				$("#window-jack-wrapper").remove();         //--> remove window-jack
				$("#window-jack-css-theme").remove();       //--> remove css theme
				$("#window-jack-css-script").remove();      //--> remove any window-jack additional scripts
		    });
		    return false;
		});
	}
	
	
	$window_jack.prototype.animate_window_jack = function (){  //--> animate semi-transparent layer and window-jack container
		switch(this.animationType1){ 
			case 'slide':
			    $("#window-jack-overlay").slideDown($animationSpeed_1);
			break;
			case 'fade':
			    $("#window-jack-overlay").fadeIn($animationSpeed_1);
			break;
			case 'scale':
			    $("#window-jack-overlay").show('scale', {}, $animationSpeed_1);
			break;
		}
		switch(this.animationType2){
			case 'slide':
			    $animation2 = '$("#window-jack-container").slideDown(' + $animationSpeed_2 + ');'
			break;
			case 'fade':
			    $animation2 = '$("#window-jack-container").fadeIn(' + $animationSpeed_2 + ');'
			break;
			case 'scale':
			    $animation2 = '$("#window-jack-container").show("scale", {}, ' + $animationSpeed_2 + ');'
			break;
		}
		setTimeout(
		    $animation2,
		    $animationDelay
		);
	}
	

	$window_jack.prototype.add_css = function (url) {  //--> add CSS for theme chosen
        $headID = $("head").get(0);
	    $cssNode = document.createElement('link');
	  	$cssNode.type = 'text/css';
	  	$cssNode.rel = 'stylesheet';
	  	$cssNode.href = url;
	  	$cssNode.media = 'screen';
	    $cssNode.id = 'window-jack-css-theme';
	  	$headID.appendChild($cssNode);
	}
	
	
	$window_jack.prototype.add_window_jack_script = function (url){  //--> add addition script for extending functionality (used for slideshow and custom types)
		 $headID = $("head").get(0);
		 $scriptNode = document.createElement('script');
		 $scriptNode.type = 'text/javascript';
		 $scriptNode.rel = 'window-jack-slideshow-script';
		 $scriptNode.src = url;
		 $scriptNode.id = 'window-jack-css-script';
		 $headID.appendChild($scriptNode);
	}
	

	$window_jack.prototype.adjust_window_jack = function () {	 //--> center window-jack relative to browser window
		var $leftPos = ($(window).width() / 2) - ($("#window-jack-container").width() / 2);	
		var $windoPosition = $(window).scrollTop();
		var $offsetHeight = ($(window).height() / 2) - ($("#window-jack-container").height() / 2);
		var $topPos = $windoPosition + ($offsetHeight - 20);
		$("#window-jack-overlay").css('opacity', Number(this.opacity));   //-->  without setting this the transparent layer briefly shows at full transparency
		$("#window-jack-overlay").css('position', "absolute");		
		$("#window-jack-overlay").css('width', $(window).width() + "px");
		$("#window-jack-overlay").css('height', $(window).height() + "px");
		$("#window-jack-overlay").css('left', "0px"); 
		$("#window-jack-overlay").css('top', $windoPosition + "px");
		$("#window-jack-container").css('left', $leftPos + "px"); 
	    $("#window-jack-container").css('top', $topPos + "px");	
	}
	
	
	$window_jack.prototype.window_jack_slideshow = function (){  //--> window-jack slideshow
		$slideshowBlock = String(this.path);
		$('#window-jack-media').html($('#'+ $slideshowBlock + ' ul li:first').html());  // add first image to container

		$window_jack.prototype.adjust_window_jack();  // center window hack container
		$slideshow_count = $('#'+ $slideshowBlock + ' ul li').size();  // get number of elements in slideshow
		$counter = 1;

		$('#window-jack-controls #next-btn').click(function(){	  // add next function listener
			$('#window-jack-media img').fadeOut(function(){              
			     if($counter == $slideshow_count){
				     $counter = 0;
			     }
			     $('#window-jack-media').hide();
			     $('#window-jack-media').html($('#' + $slideshowBlock + ' ul li').eq($counter).html());
			     $('#window-jack-media').fadeIn(300);     
			     $counter ++; 
			});
			return false;
		});

		$('#window-jack-controls #prev-btn').click(function(){	  // add next function listener
			$('#window-jack-media img').fadeOut(function(){   
				 if($counter-1 == 0){
				     $counter = $slideshow_count;
		         }else{
			         $counter --; 
		         }
			     $('#window-jack-media').hide();
			     $('#window-jack-media').html($('#' + $slideshowBlock + ' ul li').eq($counter-1).html());
			     $('#window-jack-media').fadeIn(300);     
			});
			return false;
		});
	}
	
	
	$window_jack.prototype.window_jack_htmlblock = function (){  //--> window-jack html block
	    $htmlBlock = String(this.path);
	    $('#window-jack-media').html($('#'+ $htmlBlock).html());
     	$window_jack.prototype.adjust_window_jack();
	}
	
		
	$(window).scroll( function() {       //--> adjust window-jack on scroll
	    $window_jack.prototype.adjust_window_jack();
	});


	$(window).resize( function() {      //--> adjust window-jack on resize
		$window_jack.prototype.adjust_window_jack();
	});
	
	//if($(".window-jack-link")){ //}.click(function(){  //--> main listener to open window-jack
		$this = $(this);
		$params = "image:default:702:432:fade-fade:0.7";
		$path = "images/viv-promotion.jpg"; //$this.attr("href");
		$title = ""; //$this.attr("title");
		$new_window_jack = new $window_jack($params, $path, $title);  //--> create new instance of window jack
	    return false;
	//}//);
		
});