/*

   miniTongue "linguetta" Script  :P

   Menu orizzontali parzialmente sovrapposti che al passaggio
   del mouse si "estendono".

   ======================================================================

   ver.1.26 27 ott 2011

   latest:
   - corretto bug (quando 'selected' era primo figlio non chiudeva correttamente le linguette perchè miniSize non veniva settato correttamente)
   - possibilità di lasciare 'aperta' la linguetta marcata con classe 'selected';
   - possibilità di visualizzare o nascondere l'ultimo item della fila
   - modificata animation e inserita direttamente la lunghezza e il left "target" (l'animazione poi viene gestita da jquery
   a seconda della duration)
   - prima versione funzionante

   ======================================================================

   Copyright (c) 2011 calu@caluisland.com
   http://www.caluisland.com

   Licensed under the MIT license:
       http://www.opensource.org/licenses/mit-license.php



*/


(function( $ ){
  $.fn.miniTongue = function(options)
  {
    var defaults = {
    	extendedSize: 125,
    	duration: 300,
        showLastItem: true,
    };
    var opts = $.extend(defaults, options);
    var miniSize = this.children('li[class!="selected"]').width();
    var selector = (opts.showLastItem) ? ':not(:last-child)' : '';

    /* apply overflow!

       l'overflow lo applico a tutti gli elementi del menu tranne che all'ultimo
       che deve rimanere esteso per ovvi motivi (è quello che si vede sempre ;)

    */

    this.children(selector).css("overflow", "hidden");

    this.children(selector).bind('mouseover', function() {
      $(this).stop(true, false);
      var leftpx = $(this).position().left;
      $(this).animate(
      {
       width: opts.extendedSize,
       left: leftpx
      },
      {
       duration: opts.duration,
       complete: function()
       {
        $(this).width(opts.extendedSize);
       }
      }
      );
    });

    this.children(selector).bind('mouseleave', function() {
      var toSize = $(this).attr("class") == "selected" ? extendedSize : miniSize;
      $(this).stop(true, false);
      $(this).animate(
       {
        width: toSize
       },
       {
        duration: opts.duration,
        complete: function()
        {
          $(this).width(toSize);
        }
       }
      );
    });


  };
})( jQuery );