(function($) {

    $.fn.slideBox = function(params) {

        var content = $(this).html();
        var defaults = {
            width: "100%",
            height: "200px",
            position: "bottom",      // Possible values : "top", "bottom"
            hide_height: "70px",
            default_panel: "properties"
        }

    // extending the fuction
    if (params) $.extend(defaults, params);

    var divPanel = $("<div class='slide-panel'>");
    var divContent = $("<div class='content'>");
    var panel = defaults.default_panel;
    var last_panel = "#content_" + defaults.default_panel;
    var tab = defaults.tab;
    var element;
    var count = 0;
    
    
    $(divContent).html(content);
    $(divPanel).addClass(defaults.position);
    $(divPanel).css("width", defaults.width);
    $(divContent).css("height", defaults.hide_height);
    
    
    $.fn.slideBox.click_me = function(params) {
        
      panel = "#content_" + params.panel;

      $(".slider_nav_link").removeClass("active");
      $("#" + params.panel).addClass("active");
      if(panel != last_panel){
          $(last_panel).fadeOut()
          $(panel).fadeIn();
          last_panel = panel;
      }
          
      $(divContent).animate({ height: params.height }, 1000, function() {
        $("#close-button").css("background", "url(/images/" + defaults.tab + "_tab_close.png) no-repeat");
        $("#open-button").hide();
                $("#close-button").show(); 
                defaults.height = params.height;
      });
      
       
   }

        // 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 id='open-button' class='" + defaults.tab + " tab'></div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='" + defaults.tab + " tab'></div>");
        $(divPanel).append("<div id='content_wrapper_shadow'></div>");

        if (defaults.position == "bottom")
            $(divPanel).append($(divContent));

        $(this).replaceWith($(divPanel));

        // Buttons action
        $("#close-button").click(function() {
            if ($(this).attr("id") == "close-button")
                $(divContent).animate({ height: defaults.hide_height }, 1000, function() { 
                 $("#close-button").hide();
                 $("#open-button").show();
             });
        });

        $("#open-button").hover(function() {
            if ($(this).attr("id") == "open-button")
                $(divContent).animate({ height: defaults.height }, 1000, function() {
                $("#close-button").css("background", "url(/images/" + defaults.tab + "_tab_close.png) no-repeat");
        $("#open-button").hide();
                $("#close-button").show();
        
             });
        });
  
    };

})(jQuery);