/*
 *
 * fmSimpleTabs
 * to create tabs either active or inactive, loading local content or via ajax
 *
 * depends on : jquery, jquery.tools.tabs-1.0.3
 *
 * HTML typical example :

	 <div class="rubric" id="SeeThisFilmTabs">

		<!-- tabs bar -->
		<div class="tabs">
			<div class="hrbasic"></div>
			<div class="spacer"></div>
			<ul>
				<li><a href="#"><span>Tab #1</span></a></li>
				<li><a href="#"><span>Tab #2</span></a></li>							        
				<li><em><span>Tab #3</span></em></li>
				<li><a href="/some-url.html"><span>Tab #4</span></a></li><!-- url => ajax loading IF the pane is empty -->
			</ul>
			<div class="spacer"></div>
		</div>
		<!-- /tabs bar -->

		<div class="tabs-panes">	
			<div class="rubric vpadding10t">Content #1</div>
			<div class="rubric vpadding10t">Content #2</div>
			<div class="rubric vpadding10t">Content #3</div>
			<div class="rubric vpadding10t"></div><!-- really empty => ajax allowed -->
		</div>     
		<!-- End tabs-panes  -->                          
				   

	</div>

<script type="text/javascript">
$(function(){
	$("#SeeThisFilmTabs > .tabs > ul").fmSimpleTabs({
		panes: ".tabs-panes > div.rubric",
		tab: "li",
		startingTab: 0,
		isAjax: true,
		loadingMsg: "<div><img src=\"\" style=\"margin:30px auto;\" /></div>"
	});
});
</script>

 */
(function($) {
  $.fn.fmSimpleTabs = function(_options) {
    var defaults = {
      panes: "",
      tab: "",
      startingTab: 0,
      isAjax: true,
      loadingMsg: ""
    };

    var options = $.extend(defaults, _options || {});
    var _tabs = $(this);

    return this.each(function() {

      var _panes = options.panes;
      var _tab = options.tab;
      var _startingTab = options.startingTab;
      var _isAjax = options.isAjax;
      var _loadingMsg = options.loadingMsg;

      $(_panes).css("display", "none");

      $(_tabs).tabs(_panes, {
        initialIndex: _startingTab,
        tabs: _tab,
        effect: "ac-fade",
        onBeforeClick: function(event, tabIndex) {

          var isPaneDisabled = false;
          var nextTab = this.getTabs().eq(tabIndex);
          var currTab = this.getCurrentTab();

          if (!nextTab.children("a").length && (nextTab.children("em").length && nextTab.children("em").css('display') == "block")) { isPaneDisabled = true; return false; } //booohhh ugly !! :)

          // Méthode utilisée pour préserver le lien du href, si un jour on en met un, pour eviter de faire un append("<a href=""></a>") bête et méchant                
          // La classe current n'est pas créée a l'init, donc on check si elle existe
          //if (currTab.length)
          // si la balise <em> n'est pas créée, on fait un append pour la créer et y inserer la data contenu dans le lien
          if (currTab.length && (!currTab.children("em").length) ) { currTab.append("<em>" + currTab.children("a").html() + "</em>"); }         
          if (!nextTab.children("em").length) { nextTab.append("<em>" + nextTab.children("a").html() + "</em>"); }

          // on inverse le display entre <a> et <em> pour que l'onglet courant soit cliquable et le future ne le soit plus
          currTab.children("em").css('display', 'none');
          currTab.children("a").css('display', 'block');
          nextTab.children("em").css('display', 'block');
          nextTab.children("a").css('display', 'none');

          if (_isAjax && !isPaneDisabled) {

            this.getPanes().filter(":empty").height(this.getPanes().eq(0).height());

            var thisPane = this.getPanes().eq(tabIndex);
            var $a = this.getTabs().eq(tabIndex).children("a");
            var isValidUrl = ($a.length && $a[0].protocol == "http:" && (($a.attr("href") || "#") != "#"));
            var UrlToLoad = isValidUrl ? $a.attr("href") : "";

            if (isValidUrl) {
              if (_loadingMsg) { thisPane.html(_loadingMsg); }
              thisPane.load(UrlToLoad, function() { thisPane.css("height", ""); });
            }
          }
        }
      });

    });
  };
})(jQuery);