// JavaScript Document

/**
 * 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: "169px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='contentbox' id='box1a'>");
	
		$(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' id='swap-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: "64px"}, 250);
				document.getElementById('box1a').style.backgroundImage ="url('Images/smallbox.gif')";
				document.getElementById('text1a_open').style.display ="none";
				document.getElementById('text1a').style.display ="block";
				document.getElementById('swap-button').style.height ="64px";
			} else {
				$(divContent).animate({height: defaults.height}, 500);
				document.getElementById('box1a').style.backgroundImage ="url('Images/largebox.gif')";
				document.getElementById('text1a').style.display ="none";
				document.getElementById('text1a_open').style.display ="block";
				document.getElementById('close-button').style.height ="169px";
			}
			$(".slide-button").toggle();
		});
		
	};
	
	
	
	
	
	
	
	$.fn.slideBox2 = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "169px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='contentbox' id='box2a'>");
	
		$(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-button2' id='swap-button2'></div>");
		$(divPanel).append("<div style='display: none' id='close-button2' class='slide-button2'></div>");
		
		if(defaults.position == "bottom")
			$(divPanel).append($(divContent));
		
		$(this).replaceWith($(divPanel));
		
		// Buttons action
		$(".slide-button2").click(function(){
			if($(this).attr("id") == "close-button2"){
				$(divContent).animate({height: "64px"}, 250);
				document.getElementById('box2a').style.backgroundImage ="url('Images/smallbox.gif')";
				document.getElementById('text2a_open').style.display ="none";
				document.getElementById('text2a').style.display ="block";
				document.getElementById('swap-button2').style.height ="64px";
			} else {
				$(divContent).animate({height: defaults.height}, 500);
				document.getElementById('box2a').style.backgroundImage ="url('Images/largebox.gif')";
				document.getElementById('text2a').style.display ="none";
				document.getElementById('text2a_open').style.display ="block";
				document.getElementById('close-button2').style.height ="169px";
			}
			$(".slide-button2").toggle();
		});
		
	};	
	
	

	$.fn.slideBox3 = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "169px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='contentbox' id='box3a'>");
	
		$(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-button3' id='swap-button3'></div>");
		$(divPanel).append("<div style='display: none' id='close-button3' class='slide-button3'></div>");
		
		if(defaults.position == "bottom")
			$(divPanel).append($(divContent));
		
		$(this).replaceWith($(divPanel));
		
		// Buttons action
		$(".slide-button3").click(function(){
			if($(this).attr("id") == "close-button3"){
				$(divContent).animate({height: "64px"}, 250);
				document.getElementById('box3a').style.backgroundImage ="url('Images/smallbox.gif')";
				document.getElementById('text3a_open').style.display ="none";
				document.getElementById('text3a').style.display ="block";
				document.getElementById('swap-button3').style.height ="64px";
			} else {
				$(divContent).animate({height: defaults.height}, 500);
				document.getElementById('box3a').style.backgroundImage ="url('Images/largebox.gif')";
				document.getElementById('text3a').style.display ="none";
				document.getElementById('text3a_open').style.display ="block";
				document.getElementById('close-button3').style.height ="169px";
			}
			$(".slide-button3").toggle();
		});
		
	};
	
$.fn.slideBox4 = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "169px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='contentbox' id='box4a'>");
	
		$(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-button4' id='swap-button4'></div>");
		$(divPanel).append("<div style='display: none' id='close-button4' class='slide-button4'></div>");
		
		if(defaults.position == "bottom")
			$(divPanel).append($(divContent));
		
		$(this).replaceWith($(divPanel));
		
		// Buttons action
		$(".slide-button4").click(function(){
			if($(this).attr("id") == "close-button4"){
				$(divContent).animate({height: "64px"}, 250);
				document.getElementById('box4a').style.backgroundImage ="url('Images/smallbox.gif')";
				document.getElementById('text4a_open').style.display ="none";
				document.getElementById('text4a').style.display ="block";
				document.getElementById('swap-button4').style.height ="64px";
			} else {
				$(divContent).animate({height: defaults.height}, 500);
				document.getElementById('box4a').style.backgroundImage ="url('Images/largebox.gif')";
				document.getElementById('text4a').style.display ="none";
				document.getElementById('text4a_open').style.display ="block";
				document.getElementById('close-button4').style.height ="169px";
			}
			$(".slide-button4").toggle();
		});
		
	};	
	
	
	
$.fn.slideBox5 = function(params){
	
		var content = $(this).html();
		var defaults = {
			width: "100%",
			height: "169px",
			position: "bottom"			// Possible values : "top", "bottom"
		}
		
		// extending the fuction
		if(params) $.extend(defaults, params);
		
		var divPanel = $("<div class='slide-panel'>");
		var divContent = $("<div class='contentbox' id='box5a'>");
	
		$(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-button5' id='swap-button5'></div>");
		$(divPanel).append("<div style='display: none' id='close-button5' class='slide-button5'></div>");
		
		if(defaults.position == "bottom")
			$(divPanel).append($(divContent));
		
		$(this).replaceWith($(divPanel));
		
		// Buttons action
		$(".slide-button5").click(function(){
			if($(this).attr("id") == "close-button5"){
				$(divContent).animate({height: "65px"}, 250);
				document.getElementById('box5a').style.backgroundImage ="url('Images/smallbox.gif')";
				document.getElementById('text5a_open').style.display ="none";
				document.getElementById('text5a').style.display ="block";
				document.getElementById('swap-button5').style.height ="64px";
			} else {
				$(divContent).animate({height: defaults.height}, 500);
				document.getElementById('box5a').style.backgroundImage ="url('Images/largebox.gif')";
				document.getElementById('text5a').style.display ="none";
				document.getElementById('text5a_open').style.display ="block";
				document.getElementById('close-button5').style.height ="169px";
			}
			$(".slide-button5").toggle();
		});
		
	};		
				
	
	
})(jQuery);