Team:Arizona State/Templates/jquery-lavalamp

*
• <a href="#">Phone Home</a>
*
• <a href="#">Make Contact</a>
*
• <a href="#">Board Ship</a>
*
• <a href="#">Fly to Venus</a>
*

*
* Additional Styles must be added to make the LavaLamp perform properly, to wit:
*
* <style>
* ul.lavaLamp {
*   padding:5px;  // use some minimal padding to account for sloppy mouse movements
* }
* ul.lavaLamp li.backLava {
*   z-index:3;   // must be less than z-index of A tags within the LI elements
* }
* ul.lavaLamp li a {
*  display:block;  // helps with positioning the link within the LI element
*  z-index:10;     // or must be higher than li.backLava z-index
* }
* </style>
*
* Once you have included the basic styles above, you will need to include 
* the jQuery library, easing plugin (optional) and the this LavaLamp plugin.
*
* jQuery Easing Library 1.3 available here:  http://plugins.jquery.com/project/Easing
* 
* Example LavaLamp initializing statement:
* $(function() { $("ul.lavaLamp").lavaLamp({ fx: "easeOutBack", speed: 700}) });
* finds all UL elements in the document with the class of 'lavaLamp' and attaches the 
* LavaLamp plugin using an easing library fx of OutBack and an animate speed of 
* 700 milliseconds or 7/10ths of a second.
*
*
* List of Parameters
*
* @param target - default: 'li' 
* valid selector for target elements to receive hover effect
*
* Example:
* jQuery("div#article").lavaLamp({ target:'p' });
* assigns all p elements under div#article to receive lavaLamp hover events
*
* @param fx - default: 'swing'
* selects the easing formula for the animation - requires the jQuery Easing library 
* to be loaded for additional effects
* 
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ fx: "easeOutElastic" });
* animates the backLava element using the OutElastic formula
* 
* @param speed - default: 500
* sets animation speed in milliseconds
* 
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ speed: 1000 });
* sets the animation speed to one second.
* 
* @param click - default: function() { return true; }
* Callback to be executed when the menu item is clicked. The 'event' object and source LI
* DOM element will be passed in as arguments so you can use them in your function.
* 
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ click: function(event, menuItem) {
*		alert(event+el);
*		return false;
* } });
* causes the browser to display an alert message of the variables passed and 
* return false aborts any other click events on child items, including not 
* following any links contained within the LI
*
* @param startItem - default: 'no'
* specifies the number LI element as default, starting with 0 for the first element
* Used to manually set the default lavaLamp hi-light on load.
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ startItem: 2 });
* selects the third element in the list as default location for backLava
*
* @param autoReturn - default: true
* defines whether the backLava hover should return to the last selectedLava element
* upon mouseleave.
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ autoReturn: false });
* turns off the autoReturn feature - backLava element will stay on the last element
* that you hovered over.
*
* @param returnDelay - default: 0
* how many milliseconds to wait before returning the backLava element to the last
* selected element.  Only works if autoReturn is set to true (default setting)
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ returnDelay: 1000 });
* waits one second after mouseleave event before returning to the last selected
* element.
*
* @param setOnClick - default: true
* defines whether a clicked element should receive the selectLava class and become the
* most recently selected element
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ setOnClick:false });
* disables selecting of elements once clicked - after you leave the parent list element
* the backLava will return to the original default element the page was loaded with.
*
* @param homeTop - default: 0
* @param homeLeft - default: 0
* @param homeHeight - default: 0
* @param homeWidth - default: 0
* allows you to define an independent 'home' element where the backLava defaults to or can
* be sent to. This can be used to define a unique starting and/or resting place for the 
* backLava upon leaving the parent element.
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ homeTop:-100, homeLeft:0, homeHeight:20, homeWidth:600 });
* creates a home element 100 pixels above the parent container with a height of 20px and
* width of 600px.  If the parent element has CSS of overflow:hidden, this can provide
* an interesting fly-in effect
*
* @param returnHome - default:false
* adjusts behavior of the backLava element when the the mouse leaves the parent container. 
* the default behavior of 'false' causes the backLava element to stay on the active menu 
* items after it is first triggered. this feature respects the returnDelay parameter, if set.
* this feature overrides the autoReturn parameter.
*
* Example:
* jQuery("ul.lavaLamp").lavaLamp({ returnHome:true });
* causes the backLava element to always return to the homeLava position after 
* mouse leaves the parent container.  this can be manually triggered by running 
* the command jQuery("ul.lavaLamp").mouseover();
*
*
*/

//console.log(); (function(jQuery) { jQuery.fn.lavaLamp = function(o) {

   o = jQuery.extend({
               target: 'li', 
               fx: 'swing',
               speed: 500, 
               click: function(){return true}, 
               startItem: ,
               autoReturn: true,
               returnDelay: 0,
               setOnClick: true,
               homeTop:0,
               homeLeft:0,
               homeWidth:0,
               homeHeight:0,
               returnHome:false
               }, 
           o || {});

   return this.each(function() {
       // ensures parent UL or OL element has some positioning
       if (jQuery(this).css('position')=='static')
           jQuery(this).css('position','relative');

       // create homeLava element if origin dimensions set
       if (o.homeTop || o.homeLeft) { 
           var $home = jQuery('<'+o.target+' class="homeLava"></'+o.target+'>').css({ left:o.homeLeft, top:o.homeTop, width:o.homeWidth, height:o.homeHeight, position:'absolute' });
           jQuery(this).prepend($home);
       }

       var path = location.pathname + location.search + location.hash, $selected, $back, $lt = jQuery(o.target+'[class!=noLava]', this), delayTimer, bx=by=0;

       // start $selected default with CSS class 'selectedLava'
       $selected = jQuery(o.target+'.selectedLava', this);
       
       // override $selected if startItem is set
       if (o.startItem != )
           $selected = $lt.eq(o.startItem);

       // default to $home element
       if ((o.homeTop || o.homeLeft) && $selected.length<1)
           $selected = $home;

       // loop through all the target element a href tags and
       // the longest href to match the location path is deemed the most 
       // accurate and selected as default
       if ($selected.length<1) {
           var pathmatch_len=0, $pathel;
   
           $lt.each(function(){ 
               var thishref = $('a:first',this).attr('href');
               //console.log(thishref+' size:'+thishref.length);
               if (path.indexOf(thishref)>-1 && thishref.length > pathmatch_len )
               {
                   $pathel = $(this);
                   pathmatch_len = thishref.length;
               }
   
           });
           if (pathmatch_len>0) {
               //console.log('found match:'+$('a:first',$pathel).attr('href'));
               $selected = $pathel;
           }
           //else 
               //console.log('no match!');
       }
   
       // if still no matches, default to the first element
       if ( $selected.length<1 )
           $selected = $lt.eq(0);

       // make sure we only have one element as $selected and apply selectedLava class
       $selected = jQuery($selected.eq(0).addClass('selectedLava'));
           
       // add mouseover event for every sub element
       $lt.bind('mouseenter', function() {
           //console.log('mouseenter');
           // help backLava behave if returnDelay is set
           if(delayTimer) {clearTimeout(delayTimer);delayTimer=null;}
           move(jQuery(this));
       }).click(function(e) {
           if (o.setOnClick) {
               $selected.removeClass('selectedLava');
               $selected = jQuery(this).addClass('selectedLava');
           }
           return o.click.apply(this, [e, this]);
       });
       
       // creates and adds to the container a backLava element with absolute positioning