/**
 * Slide Box : a jQuery Plug-in
 * Samuel Garneau <samgarneau@gmail.com>
 * http://samuelgarneau.com
 * 
 * Released under no license, just use it where you want and when you want.
 */

(function($){
	
	$.fn.slideBox = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "100%",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='content'>");
	
		$(divContent).html(content);
		$(divPanel).addClass(defaults.position);
		$(divPanel).css("width", defaults.width);
		
		// centering the slide panel
		$(divPanel).css("left", (100 - parseInt(defaults.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults.position == "top")
			$(divPanel).append($(divContent));
		
		// adding buttons
		$(divPanel).append("<div class='slide-button'></div>");
		$(divPanel).append("<div style='display: none' id='close-button' class='slide-button'><div class='slide-button-close'></div></div>");
		
		if(defaults.position == "bottom")
			$(divPanel).append($(divContent));
		
		$(this).replaceWith($(divPanel));
		
		// Buttons action
		$(".slide-button").click(function(){
			if($(this).attr("id") == "close-button")
				$(divContent).animate({height: "0px"}, 200);
			else
				$(divContent).animate({height: defaults.height}, 200);
			
			$(".slide-button").toggle();
		});
	};
	
	
	
$.fn.slideBox2 = function(params2){
	
		var content2 = $(this).html();
		var defaults2 = {
			width: "100%",
			height: "100%",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params2) $.extend(defaults2, params2);
		
		var divPanel2 = $("<div class='slide-panel'>");
		var divContent2 = $("<div class='content'>");
	
		$(divContent2).html(content2);
		$(divPanel2).addClass(defaults2.position);
		$(divPanel2).css("width", defaults2.width);
		
		// centering the slide panel
		$(divPanel2).css("left", (100 - parseInt(defaults2.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults2.position == "top")
			$(divPanel2).append($(divContent2));
		
		// adding buttons
		$(divPanel2).append("<div class='slide-button2'></div>");
		$(divPanel2).append("<div style='display: none' id='close-button2' class='slide-button2'><div class='slide-button-close2'></div>");
		
		if(defaults2.position == "bottom")
			$(divPanel2).append($(divContent2));
		
		$(this).replaceWith($(divPanel2));
		
		// Buttons action
		$(".slide-button2").click(function(){
			if($(this).attr("id") == "close-button2")
				$(divContent2).animate({height: "0px"}, 200);
			
			else
				$(divContent2).animate({height: defaults2.height}, 200);
			
			$(".slide-button2").toggle();
		});
	};
	
	
$.fn.slideBox3 = function(params3){
	
		var content3 = $(this).html();
		var defaults3 = {
			width: "100%",
			height: "100%",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params3) $.extend(defaults3, params3);
		
		var divPanel3 = $("<div class='slide-panel'>");
		var divContent3 = $("<div class='content'>");
	
		$(divContent3).html(content3);
		$(divPanel3).addClass(defaults3.position);
		$(divPanel3).css("width", defaults3.width);
		
		// centering the slide panel
		$(divPanel3).css("left", (100 - parseInt(defaults3.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults3.position == "top")
			$(divPanel3).append($(divContent3));
		
		// adding buttons
		$(divPanel3).append("<div class='slide-button3'></div>");
		$(divPanel3).append("<div style='display: none' id='close-button3' class='slide-button3'><div class='slide-button-close3'></div>");
		
		if(defaults3.position == "bottom")
			$(divPanel3).append($(divContent3));
		
		$(this).replaceWith($(divPanel3));
		
		// Buttons action
		$(".slide-button3").click(function(){
			if($(this).attr("id") == "close-button3")
				$(divContent3).animate({height: "0px"}, 200);
			
			else
				$(divContent3).animate({height: defaults3.height}, 200);
			
			$(".slide-button3").toggle();
		});
	};
	
	
	
	
	
	$.fn.slideBox4 = function(params4){
	
		var content4 = $(this).html();
		var defaults4 = {
			width: "100%",
			height: "100%",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params4) $.extend(defaults4, params4);
		
		var divPanel4 = $("<div class='slide-panel'>");
		var divContent4 = $("<div class='content'>");
	
		$(divContent4).html(content4);
		$(divPanel4).addClass(defaults4.position);
		$(divPanel4).css("width", defaults4.width);
		
		// centering the slide panel
		$(divPanel4).css("left", (100 - parseInt(defaults4.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults4.position == "top")
			$(divPanel4).append($(divContent4));
		
		// adding buttons
		$(divPanel4).append("<div class='slide-button4'></div>");
		$(divPanel4).append("<div style='display: none' id='close-button4' class='slide-button4'><div class='slide-button-close4'></div>");
		
		if(defaults4.position == "bottom")
			$(divPanel4).append($(divContent4));
		
		$(this).replaceWith($(divPanel4));
		
		// Buttons action
		$(".slide-button4").click(function(){
			if($(this).attr("id") == "close-button4")
				$(divContent4).animate({height: "0px"}, 200);
			
			else
				$(divContent4).animate({height: defaults4.height}, 200);
			
			$(".slide-button4").toggle();
		});
	};
	
	$.fn.slideBox5 = function(params5){
	
		var content5 = $(this).html();
		var defaults5 = {
			width: "100%",
			height: "100%",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params5) $.extend(defaults5, params5);
		
		var divPanel5 = $("<div class='slide-panel'>");
		var divContent5 = $("<div class='content'>");
	
		$(divContent5).html(content5);
		$(divPanel5).addClass(defaults5.position);
		$(divPanel5).css("width", defaults5.width);
		
		// centering the slide panel
		$(divPanel5).css("left", (100 - parseInt(defaults5.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults5.position == "top")
			$(divPanel5).append($(divContent5));
		
		// adding buttons
		$(divPanel5).append("<div class='slide-button5'></div>");
		$(divPanel5).append("<div style='display: none' id='close-button5' class='slide-button5'><div class='slide-button-close5'></div>");
		
		if(defaults5.position == "bottom")
			$(divPanel5).append($(divContent5));
		
		$(this).replaceWith($(divPanel5));
		
		// Buttons action
		$(".slide-button5").click(function(){
			if($(this).attr("id") == "close-button5")
				$(divContent5).animate({height: "0px"}, 200);
			
			else
				$(divContent5).animate({height: defaults5.height}, 200);
			
			$(".slide-button5").toggle();
		});
	};
	
	
})(jQuery);