//MARKUP
//<a id="ID" class="CLASS" onclick="pandaBox('ID')" rel="WIDTH;HEIGHT;URL" title="TITLE"></a>

function pandaBox2(ID){
	var linkString = '#'+ID;
	var $link = $(linkString);
	var splitLink = $link.attr('rel').split(';');
	var $width = splitLink[0];
	var $height = splitLink[1];
	var $url = $link.attr('href');
	var $title = $link.attr('title');
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var docWidth = $(document).width();
	var docHeight = $(document).height();
	
	//ADDS PANDA BOX ELEMENTS
	$('body').append('<div class="pb-container"><div class="pb-wrapper"><div class="white-overlay"></div></div></div>');
	var $pbContainer = $('.pb-container');
	var $pbWrapper = $('.pb-wrapper');
	var $whiteOverlay = $('.white-overlay');
	$pbWrapper.append('<div class="pb-content"><table class="overlay-content" cellspacing="0" cellpadding="0" border="0"><thead><tr><td width="10px" class="left"></td><td class="middle">'+$title+'</td><td width="10px" class="right"></td></tr></thead><tbody><tr><td colspan="3" valign="top"><div class="panda-iframe-container"></div></td></tr><tr><td class="pb-close" colspan="3"></td></tr></tbody></table></div>');
	var $pbContent = $('.pb-content');
	var $pbIframeContainer = $('.panda-iframe-container');
	var $pbClose = $('.pb-close');
	$('.scroll-container').css({'height':$height,'width':$width});
	
	//ADDS A SEMI-TRANSPARENT OVERLAY 
	$('body').append('<div class="pb-overlay"></div>');
	var $pbOverlay = $('.pb-overlay');
	
	$pbOverlay.animate({
		opacity:'.8'
	}, 500, function(){
		$whiteOverlay.css('display', 'block');
		$pbIframeContainer.append('<iframe class="panda-box" src="'+$url+'" width="'+$width+'" height="'+$height+'"></iframe>');
		var $pandaBox = $('.panda-box');
		$pandaBox.load(function() {
			$pbClose.append('<a class="close" onClick="pandaBoxClose()">Close</a>');
//			var $pandaBoxBody = $('.panda-box').contents().find('body');
//			$pandaBox.css('overflow', 'hidden');
			//alert($pandaBoxBody.attr('class'));
			//$pandaBoxBody.css('display', 'block');
		});
		
		$whiteOverlay.animate({
			height:$height
		}, 300, function(){
			$whiteOverlay.animate({
					width:$width
				}, 200, function(){
					$pbContent.css('display', 'block');
					$whiteOverlay.animate({
						opacity:0
						}, 100, function(){
							$whiteOverlay.css('display', 'none');
						});
				});
			$pbWrapper.animate({
				width: $width
			}, 200, function(){});
		});
		
		//$pandaBox.scrollTop(200);
	});
	
	$pbContainer.click(function(){
		pandaBoxClose();
	});
};

function pandaBox(ID){
	var linkString = '#'+ID;
	var $link = $(linkString);
	var splitLink = $link.attr('rel').split(';');
	var $width = splitLink[0];
	var $height = splitLink[1];
	var $url = splitLink[2];
	var $title = $link.attr('title');
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var docWidth = $(document).width();
	var docHeight = $(document).height();
	
	//ADDS PANDA BOX ELEMENTS
	$('body').append('<div class="pb-container"><div class="pb-wrapper"><div class="white-overlay"></div></div></div>');
	var $pbContainer = $('.pb-container');
	var $pbWrapper = $('.pb-wrapper');
	var $whiteOverlay = $('.white-overlay');
	$pbWrapper.append('<div class="pb-content"><table class="overlay-content" cellspacing="0" cellpadding="0" border="0"><thead><tr><td width="10px" class="left"></td><td class="middle">'+$title+'</td><td width="10px" class="right"></td></tr></thead><tbody><tr><td colspan="3" valign="top"><div class="panda-iframe-container"></div></td></tr><tr><td class="pb-close" colspan="3"></td></tr></tbody></table></div>');
	var $pbContent = $('.pb-content');
	var $pbIframeContainer = $('.panda-iframe-container');
	var $pbClose = $('.pb-close');
	$('.scroll-container').css({'height':$height,'width':$width});
	
	//ADDS A SEMI-TRANSPARENT OVERLAY 
	$('body').append('<div class="pb-overlay"></div>');
	var $pbOverlay = $('.pb-overlay');
	
	$pbOverlay.animate({
		opacity:'.8'
	}, 500, function(){
		$whiteOverlay.css('display', 'block');
		$pbIframeContainer.append('<iframe class="panda-box" src="'+$url+'" width="'+$width+'" height="'+$height+'"></iframe>');
		var $pandaBox = $('.panda-box');
		$pandaBox.load(function() {
			$pbClose.append('<a class="close" onClick="pandaBoxClose()">Close</a>');
//			var $pandaBoxBody = $('.panda-box').contents().find('body');
//			$pandaBox.css('overflow', 'hidden');
			//alert($pandaBoxBody.attr('class'));
			//$pandaBoxBody.css('display', 'block');
		});
		
		$whiteOverlay.animate({
			height:$height
		}, 300, function(){
			$whiteOverlay.animate({
					width:$width
				}, 200, function(){
					$pbContent.css('display', 'block');
					$whiteOverlay.animate({
						opacity:0
						}, 100, function(){
							$whiteOverlay.css('display', 'none');
						});
				});
			$pbWrapper.animate({
				width: $width
			}, 200, function(){});
		});
		
		//$pandaBox.scrollTop(200);
	});
	
	$pbContainer.click(function(){
		pandaBoxClose();
	});
};

function pandaBoxClose(){
	var $pbWrapper = $('.pb-wrapper');
	var $pbOverlay = $('.pb-overlay');
	
	$pbWrapper.animate({
		minWidth: '0',
		width: '0',
		height: '0'
	}, 300, function(){
		$('div').remove('.pb-container');
	});
	$pbOverlay.animate({
		opacity:0
	}, 500, function(){
		$('div').remove('.pb-overlay');
	});
};




function overlayScroll() {
	var $psContent = $('.scroll-content');
	$psContent.append('<div class="scroll-sensor"></div>');
	var $psContainer = $('.scroll-container');
	var width = $psContainer.width();
	var height = $psContainer.height();
	var targetHeight = $psContent.height();
	
	if (targetHeight > height) {
		$psContainer.append('<div class="scroll-wrapper"><div class="scrollbar"></div><div class="scroll-handle"></div></div>');
		var $scrollWrapper = $('.scroll-wrapper');
		var $scrollHandle = $('.scroll-handle_panda');
		var $scrollBar = $('.scrollbar_panda');
		$scrollBar.css('height', '100%');
		var percentage = height / targetHeight;
		var scrollHandleHeight = height * percentage;
		var allowedMove = height - scrollHandleHeight;
		var targetAllowedMove = targetHeight - height;
		
		$scrollHandle.css('height', scrollHandleHeight-4);
		
		var startPos = parseInt($scrollWrapper.offset().top);
		var endPos = parseInt($scrollWrapper.height());
	};
};

//FOR ATTACHMENTS IN PLAYERS
(function($) {
	$.fn.pandaBoxLink = function(settings) {
		var config = {'foo': 'bar'};
		if (settings) $.extend(config, settings);
		this.each(function() {
			var $container = $(this);
			var $url = $container.attr('href');
			var $title = $container.text();
			var docWidth = $(document).width();
			var docHeight = $(document).height();
			var winWidth = $(window).width();
			var winHeight = $(window).height();
			var winScroll = $(window).scrollTop();
			
			//ADDS PANDA BOX ELEMENTS
			$('body').append('<div class="pb-container"><div class="pb-wrapper pb2"><div class="white-overlay"></div></div></div>');
			var $pbContainer = $('.pb-container');
			var $pbWrapper = $('.pb-wrapper', $pbContainer);
			var $whiteOverlay = $('.white-overlay', $pbContainer);
			$pbWrapper.append('<div class="pb-content"><table class="overlay-content" cellspacing="0" cellpadding="0" border="0"><thead><tr><td width="10px" class="left"></td><td class="middle"><p class="file-title">'+$title+'</p></td><td width="10px" class="right"></td></tr></thead><tbody><tr><td colspan="3" valign="top"><div class="content-container"></div></td></tr><tr><td class="pb-close" colspan="3"></td></tr></tbody></table></div>');
			var $pbContent = $('.pb-content', $pbContainer);
			var $contentContainer = $('.content-container', $pbContainer);
			var $pbClose = $('.pb-close', $pbContainer);
			
			
			//ADDS A SEMI-TRANSPARENT OVERLAY 
			$('body').append('<div class="pb-overlay"></div>');
			var $pbOverlay = $('.pb-overlay');
			
			$pbOverlay.animate({
				opacity:'.8',
				filter: 'alpha(opacity=80)'
			}, 500, function(){
				$whiteOverlay.css('display', 'block');
//				$contentContainer.append('<img class="panda-box" src="'+$url+'" />');
				//$contentContainer.append('<img class="panda-box" />');
				var $pandaBox = new Image();
				$($pandaBox).attr('src', $url);
				$($pandaBox).attr('class', 'panda-box');
				$($pandaBox).appendTo($contentContainer);
				
				//var $pandaBox = $('<img class="panda-box" />').appendTo($contentContainer);
				var $width;
				var $height;
				$($pandaBox).load(function() {

					$width = this.width;
					$height = this.height;
//					$width = $(this).width();
//					$height = $(this).height();
					$pbClose.append('<a class="close" onClick="pandaBoxClose()">Close</a>');
					//alert($width+'; '+$height);
					
					//$('.scroll-container').css({'height':$height,'width':$width});
					
					
					$whiteOverlay.animate({
						height:$height
					}, 300, function(){
						$whiteOverlay.animate({
								width:$width
							}, 200, function(){
								$pbContent.css('display', 'block');
								$whiteOverlay.animate({
									opacity:0,
									filter: 'alpha(opacity=0)'
									}, 100, function(){
										$whiteOverlay.css('display', 'none');
									});
							});
						$pbWrapper.animate({
							width: $width+3
						}, 200, function(){
							$pbWrapper.css('height', $height+82);
							$pbWrapper.css('top',(winHeight/2) - (($height+82)/2) + winScroll);
						});
						
						$pbClose.animate({
							width: $width+2
						}, 200, function(){});
					});
//				}).attr('src', $url);
				});
				
				//$pandaBox.scrollTop(200);
			});
			
			$pbContainer.click(function(){
				pandaBoxLinkClose();
			});

			function pandaBoxLinkClose(){
				
				$pbWrapper.animate({
					minWidth: '0',
					width: '0',
					height: '0'
				}, 300, function(){
					$('.pb-container').removeWithoutLeaking();
				});
				$pbOverlay.animate({
					opacity:0,
					filter: 'alpha(opacity=0)'
				}, 500, function(){
					$('.pb-overlay').removeWithoutLeaking();
				});
			};
		});
		return this;
   };
})(jQuery);

//General
//<a class="pandaBox-it" href="whatevah" rel="width in px;height in px;the id of div you want" title="title">panda box</a>
(function($) {
	$.fn.pandaBoxIt = function(settings) {
		var config = {'foo': 'bar'};
		if (settings) $.extend(config, settings);
		this.each(function() {
			var $container = $(this);
			var $url = $container.attr('href');
			var $title = $container.attr('title');
			var $targetDiv = '#'+$container.attr('rel').split(';')[2];
			
			if ($targetDiv !== '#'){
				$url = $url+' '+$targetDiv;
			}
			
			var $width = $container.attr('rel').split(';')[0];
			var $height = $container.attr('rel').split(';')[1];
			var docWidth = $(document).width();
			var docHeight = $(document).height();
			var winWidth = $(window).width();
			var winHeight = $(window).height();
			var winScroll = $(window).scrollTop();
			
		$container.click(function(e){
			e.preventDefault();
			
			//ADDS PANDA BOX ELEMENTS
			$('body').append('<div class="pb-container"><div class="pb-wrapper pb2"><div class="white-overlay"></div></div></div>');
			var $pbContainer = $('.pb-container');
			var $pbWrapper = $('.pb-wrapper', $pbContainer);
			var $whiteOverlay = $('.white-overlay', $pbContainer);
			$pbWrapper.append('<div class="pb-content"><table class="overlay-content" cellspacing="0" cellpadding="0" border="0"><thead><tr><td width="10px" class="left"></td><td class="middle"><p class="file-title">'+$title+'</p></td><td width="10px" class="right"></td></tr></thead><tbody><tr><td colspan="3" valign="top"><div class="content-container"></div></td></tr><tr><td class="pb-close" colspan="3"></td></tr></tbody></table></div>');
			var $pbContent = $('.pb-content', $pbContainer);
			var $contentContainer = $('.content-container', $pbContainer);
			var $pbClose = $('.pb-close', $pbContainer);
			
			
			//ADDS A SEMI-TRANSPARENT OVERLAY 
			$('body').append('<div class="pb-overlay"></div>');
			var $pbOverlay = $('.pb-overlay');
			
			$pbOverlay.animate({
				opacity:'.8',
				filter: 'alpha(opacity=80)'
			}, 500, function(){
				$whiteOverlay.css('display', 'block');
				$contentContainer.append('<div class="panda-box"></div>');
				var $pandaBox = $('.panda-box');
				$pandaBox.css({'overflow':'auto'});
				$pbWrapper.css({'width':$width, 'height':$height});
				$pbClose.css({'width':$width});
				
				$($pandaBox).load($url, function() {
					$pbClose.append('<a class="close" onClick="pandaBoxClose()">Close</a>');
					$whiteOverlay.animate({
						height:$height
					}, 300, function(){
						$whiteOverlay.animate({
								width:$width
							}, 200, function(){
								$pbContent.css('display', 'block');
								$whiteOverlay.animate({
									opacity:0,
									filter: 'alpha(opacity=0)'
									}, 100, function(){
										$whiteOverlay.css('display', 'none');
									});
							});
						$pbWrapper.animate({
							width: $width+3
						}, 200, function(){
							$pbWrapper.css('height', $height+82);
							$pbWrapper.css('top',(winHeight/2) - (($height+82)/2) + winScroll);
						});
						
						$pbClose.animate({
							width: $width+2
						}, 200, function(){
							
						});//pbClose
					});//whiteOverlay
				});//whiteOverlay
			});//panda-box load
			
			var mouse_is_inside = false;
			$pbContent.hover(function(){ 
		        mouse_is_inside=true; 
		    }, function(){ 
		        mouse_is_inside=false; 
		    });
			
			$pbContainer.mouseup(function(){ 
		        if(! mouse_is_inside) pandaBoxLinkClose();
		    });
			$pbOverlay.mouseup(function(){ 
		        if(! mouse_is_inside) pandaBoxLinkClose();
		    });

			function pandaBoxLinkClose(){
				
				$pbWrapper.animate({
					minWidth: '0',
					width: '0',
					height: '0'
				}, 300, function(){
					$('.pb-container').removeWithoutLeaking();
				});
				$pbOverlay.animate({
					opacity:0,
					filter: 'alpha(opacity=0)'
				}, 500, function(){
					$('.pb-overlay').removeWithoutLeaking();
				});
			};
	});
		});
		return this;
   };
})(jQuery);


$.fn.removeWithoutLeaking = function() {
    this.each(function(i,e){
        if( e.parentNode )
            e.parentNode.removeChild(e);
    });
};




//function pandaScroll() { = function(settings) {
//		var config = {'foo': 'bar'};
//		if (settings) $.extend(config, settings);
//		
//		this.each(function() {
//			if ($('body').has('.panda-scroll-sensor').length <= 0) {
//				$('body').append('<div class="panda-scroll-sensor"></div>');
//			}
//			
//			$(window).resize(function(){
//				var windowSize = $(window).height();
//				var windowScroll = $(window).scrollTop();
//				var docSize = $(document).height();
//				if (windowScroll > 0) {
//					$('.panda-scroll-sensor').css('height', docSize);
//				}else{
//					$('.panda-scroll-sensor').css('height', windowSize);
//				}
//			});
//			
//			var $container_panda = $(this);
//			var $target_panda = $('.panda-scroll-content', this);
//			
//			//$target.css('top', 0);
//			var width = $container_panda.width();
//			var height = $container_panda.height();
//			var targetHeight = $('.panda-scroll-content', this).height();
//			//alert(targetHeight+' ; '+height);
//			if (targetHeight > height) {
//				$container_panda.append('<div class="scroll-wrapper_panda"><div class="scrollbar_panda"></div><div class="scroll-handle_panda"></div></div>');
//				var $scrollWrapper_panda = $('.scroll-wrapper_panda', this);
//				var $scrollHandle_panda = $('.scroll-handle_panda', this);
//				var $scrollBar_panda = $('.scrollbar_panda', this);
//				$scrollBar_panda.css('height', '100%');
//				var percentage = height / targetHeight;
//				var scrollHandleHeight = height * percentage;
//				var allowedMove = height - scrollHandleHeight;
//				var targetAllowedMove = targetHeight - height;
//				
//				$scrollHandle_panda.css('height', scrollHandleHeight-4);
//				
//				var startPos = parseInt($scrollWrapper_panda.offset().top);
//				var endPos = parseInt($scrollWrapper_panda.height());
//				
//				$scrollWrapper_panda.mousedown(function(event){
//					var initY = event.pageY;
//					$('p').addClass('unselectable');
//					$('h2').addClass('unselectable');
//					$('.panda-scroll-sensor').css('z-index', 10000);
//					
//					$('.panda-scroll-sensor').mousemove(function(e){
//						var endY = e.pageY;
//						
//						var moveScroll = Math.round((endY - startPos) - (scrollHandleHeight/2));
//						//$('.log').text(endY+' ; '+startPos+' ; '+scrollHandleHeight);
//						var targetScoll = Math.round(moveScroll/percentage);
//						if (moveScroll < 0){
//							$scrollHandle_panda.css('top', 0);
//							$target_panda.css('top', 0);
//						}else if (moveScroll > allowedMove){
//							$scrollHandle_panda.css('top', allowedMove);
//							$target_panda.css('top', -targetAllowedMove);
//						}else{
//							
//							$scrollHandle_panda.css('top', moveScroll);
//							
//							$target_panda.css('top', -targetScoll);
//						}
//						
//					});
//					
//					$('.panda-scroll-sensor').mouseup(function(){
//						$('.panda-scroll-sensor').unbind('mousemove');
//						$('p').removeClass('unselectable');
//						$('h2').removeClass('unselectable');
//						$('.panda-scroll-sensor').css('z-index', 0);
//						
//						return false;
//					});
//				});
//				
////				$scrollBar_panda.mouseup(function(e){
////					var endY = e.pageY;
////					var moveScroll = Math.round((endY - startPos) - (scrollHandleHeight/2));
////					var targetScoll = Math.round(moveScroll/percentage);
////					if (moveScroll < 0){
////						$scrollHandle_panda.css('top', 0);
////						$target_panda.css('top', 0);
////					}else if (moveScroll > allowedMove){
////						$scrollHandle_panda.css('top', allowedMove);
////						$target_panda.css('top', targetAllowedMove);
////					}else{
////						$scrollHandle_panda.css('top', moveScroll);
////						$target_panda.css('top', -targetScoll);
////					}
////				});
//				
//			}else {
////				if ($(this).has($scrollWrapper_panda).length == 1) {
////					$(this).remove($scrollWrapper_panda);
////				}
//			}	
//		});
//		return this;
//   };
//})(jQuery);