(function($){
	
	$.fn.slideBox = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "200px",
			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>");
		
		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"}, 500);
				$(divPanel).css("z-index", "50");
				
			}
			else
				$(divContent).animate({height: defaults.height}, 500);
				$(divPanel).css("z-index", "99");		
							
			$(".slide-button").toggle();
			
			
		});
		$(".closeit-button").click(function(){
				$(divContent).animate({height: "0px"}, 500);
				$(".slide-button").toggle();
										
		});
	};
	$.fn.slideBox2 = function(params){
	
		var content2 = $(this).html();
		var defaults = {
			width: "100%",
			height: "200px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel2 = $("<div class='slide-panel2'>");
		var divContent2 = $("<div class='content2'>");
	
		$(divContent2).html(content2);
		$(divPanel2).addClass(defaults.position);
		$(divPanel2).css("width", defaults.width);
		
		// centering the slide panel
		$(divPanel2).css("left", (100 - parseInt(defaults.width))/2 + "%");
	
		// if position is top we're adding 
		if(defaults.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>");
		
		if(defaults.position == "bottom")
			$(divPanel2).append($(divContent2));
		
		$(this).replaceWith($(divPanel2));
		
		// Buttons action
		$(".slide-button2").click(function(){
	   		if($(this).attr("id") == "close-button2"){
				$(divContent2).animate({height: "0px"}, 250);
				$(divPanel2).css("z-index", "49");
			}
			else
				$(divContent2).animate({height: defaults.height}, 250);
				$(divPanel2).css("z-index", "98");
								
			
			$(".slide-button2").toggle();
		});
		$(".closeit-button2").click(function(){
				$(divContent2).animate({height: "0px"}, 250);
				$(".slide-button2").toggle();
										
		});
	};
	
})(jQuery);