(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='slide-content'>");

	

		$(divContent).html(content);

		$(divPanel).addClass(defaults.position);

		$(divPanel).css("width", defaults.width);

		

		// centering the slide panel

		//$(divPanel).css("position", "absolute");

	

		// if position is top we're adding 

		if(defaults.position == "top")

			$(divPanel).append($(divContent));

		

		// adding buttons

        
        $(divPanel).append("<div class='slide-button'><div class='pulldown'>Open Login</div></div>");

        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'><div class='pulldown'>Close Login</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"}, 350);

			else

				$(divContent).animate({height: defaults.height}, 350);

			

			$(".slide-button").toggle();

		});

	};

	

})(jQuery);