$(document).ready(function() {

	$(".darkBox").each(function() {

		var div = $($(this).attr("href"));

		div.hide();	// hide all divs associated with darkboxes

		$(this).click(function() {

			darkBox(div,"rainDrop");

		});

	});

});



var contentBox;



function drawLine() {

	if(contentBox) {

		var x = contentBox.position().left;

		var y = contentBox.position().top;

		var spot = $("<div></div>");

		spot.addClass("line");

		spot.css({"top":y,"left":x});

		$("body").prepend(spot);

	}

}



function darkBox(div,type) {

	(div.attr("width")) ? w = div.attr("width") : w = div.width();	

	(div.attr("height")) ? h = div.attr("height") : h = div.height();

	

	var box = $("<div></div>").addClass("darkCover");

	$("body").prepend(box);

	box.fadeTo("fast",0.8);

	

	contentBox = $("<div></div>").html(div.html());

	contentBox.addClass("darkContent");

	$("body").prepend(contentBox);

	box.click(function() {

		box.fadeOut();

		contentBox.fadeOut();

		$(".line").remove();

	});

	

	switch(type) {

		case "dropY":

			var x = $(window).width()/2;

			var y = $(window).height()/2;

			contentBox.css({"left":x+"px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			contentBox.animate({top:y,left:x-(w/2),width:w},500,"easeInExpo", function() {

				contentBox.animateOut({

					easing:"easeOutExpo",

					endWidth:w,

					endHeight:h,

					dir:"y",

					speed:500,

					endPadding:8

				});

			});

			break;

		case "rainDrop":
			var x = $(window).width()/2 ;
			var y = $(window).height()/2 - h/2;

			contentBox.css({"left":x+"px","top":"0px","z-index":"200","padding":"0px"});
			contentBox.css({"width":"0px","height":"0px"});
			
			// if not IE
			if(!$.browser.msie) {
			contentBox.animate({top:y,height:h},500,"easeInExpo", function() {

				contentBox.animateOut({

					easing:"easeOutExpo",

					endWidth:w,

					endHeight:h,

					dir:"x",

					speed:500,

					endPadding:8

				});
			});
			
			// if internet explorer
			} else {
				contentBox.css({"width":w,"height":h,"padding":"8","z-index":"200","left":x-w/2,"top":y});
			}
			
			break;

		case "4corners":

			var x = $(window).width()/2 ;

			var y = $(window).height()/2 - h/2;

			contentBox.css({"left":"0px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			// create dots in the other 3 corners

			$("body").prepend($("<div class='spot'></div>").css({"left":$(window).width()+"px","top":$(window).height()+"px"}));

			$("body").prepend($("<div class='spot'></div>").css({"left":"0px","top":$(window).height()+"px"}));

			$("body").prepend($("<div class='spot'></div>").css({"left":$(window).width()+"px","top":"0px"}));

			// animate all 4 to the center

			$(".spot").animate({top:y,left:x},1000,"easeInExpo");

			contentBox.animate({top:y,left:x},{ queue:false, duration:1000, easing:"easeInExpo",complete:function() {

				contentBox.animateOut({

					easing:"easeOutExpo",

					endWidth:w,

					endHeight:h,

					dir:"x",

					speed:500,

					endPadding:8

				});

			}});

			setTimeout("removeSpots()",1500);

			break;

		case "explode":

			

			var x = $(window).width()/2 ;

			var y = $(window).height()/2 - h/2;

			contentBox.css({"left":x+"px","top":y+"px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			var duration = 2000;

			var density = 100;	// MIND YOUR PROCESSOR

			for(var i=0;i<density;i++) {

				var rx = Math.floor(Math.random()*$(window).width());	//random x value

				var ry = Math.floor(Math.random()*$(window).height());	//random y value

				//create each spot in the center

				var spot = $("<div class='spot'></div>").css({"left":x+"px","top":y+"px"});

				$("body").prepend(spot);

				// animate them out all outward

				spot.animate({left:rx,top:ry},{ queue:false, duration:duration/2, easing:"easeInExpo"});		

			}

			// wait to animate them back inward

			setTimeout("implode("+x+","+y+","+duration/2+",'easeInExpo')",duration/2);

			//wait to grow the final box

			setTimeout("openCenter('easeOutExpo',"+w+","+h+",500,8)",duration);

			setTimeout("removeSpots()",duration);

			break;

		case "dropCenter":

			var x = $(window).width()/2 ;

			var y = $(window).height()/2;

			contentBox.css({"left":x+"px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			contentBox.animate({top:y},500,"easeInExpo", function() {

				contentBox.animateOut({

					easing:"easeOutExpo",

					endWidth:w,

					endHeight:h,

					dir:"center",

					speed:500,

					endPadding:8

				});

			});

			break;

		case "dropLineY":

			var x = $(window).width()/2 - w/2;

			var y = $(window).height()/2 - h/2;

			contentBox.css({"left":x+"px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":w+"px","height":"0px"});

			contentBox.animate({top:y},500,"easeInExpo", function() {

				contentBox.animateOut({

					easing:"easeInExpo",

					endWidth:w,

					endHeight:h,

					dir:"y",

					speed:500,

					endPadding:8

				});

			});

			break;

		case "dropLineX":

			var x = $(window).width()/2 ;

			var y = $(window).height()/2 - h/2;

			contentBox.css({"left":x+"px","top":0-h+"px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":h+"px"});

			contentBox.animate({top:y},500,"easeInExpo", function() {

				contentBox.animateOut({

					easing:"easeInExpo",

					endWidth:w,

					endHeight:h,

					dir:"x",

					speed:500,

					endPadding:8

				});

			});

			break;

		case "bounceLeft":

			var drawInt = setInterval("drawLine()",10);

			var x = $(window).width()/2 ;

			var y = $(window).height()/2;

			contentBox.css({"left":"0px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			contentBox.animate({left:x},{ queue:false, duration:2000, easing:"linear" })

			.animate({top:y},2000,"easeOutBounce", function() {

				contentBox.animateOut({

					easing:"easeInExpo",

					endWidth:w,

					endHeight:h,

					dir:"center",

					speed:500,

					endPadding:8

				});

			});	

			break;

		case "leftWave":

			var drawInt = setInterval("drawLine()",10);

			var x = $(window).width()/2 ;

			var y = $(window).height()/2;

			contentBox.css({"left":"0px","top":"0px","z-index":"200","padding":"0px"});

			contentBox.css({"width":"0px","height":"0px"});

			contentBox.animate({left:x},{ queue:false, duration:2000, easing:"linear" })

			.animate({top:y},2000,"easeOutElastic", function() {

				contentBox.animateOut({

					easing:"easeInExpo",

					endWidth:w,

					endHeight:h,

					dir:"center",

					speed:500,

					endPadding:8

				},function() {

					clearInterval(drawInt);

				});

			});	

			break;

	}	

}



// takes a left, top, duration and easing

// will animate all spots on the page inward to the given x and y

function implode(x,y,d,e) {

	$('.spot').animate({left:x,top:y},{ queue:false, duration:d, easing:e})

}



// takes easing, widht, height, speed and padding

// will expand the global contentBox from a center point

function openCenter(e,w,h,s,p) {

	contentBox.animateOut({

		easing:e,

		endWidth:w,

		endHeight:h,

		dir:"center",

		speed:s,

		endPadding:p

	});

}



// convert a percent to a decimal

function percentToDecimal(p) {

	return "."+parseInt(p);

}



function isPercent(num) {

	(num.toString().indexOf("%") != -1) ? r = true : r = false;

	return r;

}



function removeSpots() {

	$(".spot").remove();

}



// jquery plugin for animating out from center

// only will work on elements that are absolute or fixed

(function($){

	$.fn.animateOut = function(options) {



		var defaults = {

		dir: "x",

		speed: 500,	// in miliseconds

		easing: "linear",

		endPadding:0

		};

		var options = $.extend(defaults, options);

	

		return this.each(function() {

		

			// these are our final positions

			(options.endHeight) ? h = options.endHeight : h = $(this).height();

			(options.endWidth) ? w = options.endWidth : w = $(this).width();

			

			switch(options.dir) {

				case "x":

					x = $(this).position().left - w/2;

					y = $(this).position().top;

					startLeft = x+w/2;

					startTop = y;

					startWidth = 0;

					startHeight = parseInt(h);

					break;

				case "y":

					x = $(this).position().left;

					y = $(this).position().top - h/2;

					startLeft = x;

					startTop = y+h/2;

					startWidth = parseInt(w);

					startHeight = 0;

					break;

				case "center":

				default:

					x = $(this).position().left - w/2;

					y = $(this).position().top - h/2;

					startLeft = x+w/2;

					startTop = y+h/2;

					startWidth = 0;

					startHeight = 0;

					break;	

			}

			

			// move the object to its starting position

			$(this).css("left",startLeft);

			$(this).css("top",startTop);

			$(this).css("width",startWidth);

			$(this).css("height",startHeight);

			$(this).css("padding",0);



			// animate back to original

			$(this).animate({

				width: w,

				height:h,

				top:   y,

				left:  x,

				opacity:1,

				padding:options.endPadding,

				borderBottomColor:"black",

				borderTopColor:"black",

				borderLeftColor:"black",

				borderRightColor:"black"

			},options.speed,options.easing);

		});

	};

})(jQuery);