// jquery.jparallax.js
// 0.9.1
// Stephen Band
//
// Dependencies:
// jQuery 1.2.6 (jquery.com)
//
// Project and documentation site:
// http://webdev.stephband.info/parallax.html


// CLOSURE

(function(jQuery) {


// PRIVATE FUNCTIONS

function stripFiletype(ref) {
  var x=ref.replace('.html', '');
  return x.replace('#', '');
}

function initOrigin(l) {
  if (l.xorigin=='left')    {l.xorigin=0;}    else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center')    {l.xorigin=0.5;}    else if (l.xorigin=='right')    {l.xorigin=1;}
  if (l.yorigin=='top')        {l.yorigin=0;}    else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center')    {l.yorigin=0.5;}    else if (l.yorigin=='bottom')    {l.yorigin=1;}
}

function positionMouse(mouseport, localmouse, virtualmouse) {

  var difference = {x: 0, y: 0, sum: 0};
  
    // Set where the virtual mouse is, if not on target
  if (!mouseport.ontarget) {
    
    // Calculate difference
    difference.x    = virtualmouse.x - localmouse.x;
    difference.y    = virtualmouse.y - localmouse.y;
    difference.sum  = Math.sqrt(difference.x*difference.x + difference.y*difference.y);
    
    // Reset virtualmouse
    virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor;
    virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor;
    
    // If mouse is inside the takeoverThresh set ontarget to true
    if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1) {
        mouseport.ontarget=true;
    }
  }
  // Set where the layer is if on target
  else {
    virtualmouse.x = localmouse.x;
    virtualmouse.y = localmouse.y;
  }
}

function setupPorts(viewport, mouseport) {

    var offset = mouseport.element.offset();
        
  jQuery.extend(viewport, {
    width:         viewport.element.width(),
    height:     viewport.element.height()
  });
  
  jQuery.extend(mouseport, {
    width:        mouseport.element.width(),
    height:        mouseport.element.height(),
    top:            offset.top,
    left:            offset.left
  });
}

function parseTravel(travel, origin, dimension) {
  
  var offset;
  var cssPos;
  
  if (typeof(travel) === 'string') {
    if (travel.search(/^\d+\s?px$/) != -1) {
      travel = travel.replace('px', '');
      travel = parseInt(travel, 10);
      // Set offset constant used in moveLayers()
      offset = origin * (dimension-travel);
      // Set origin now because it won't get altered in moveLayers()
      cssPos = origin * 100 + '%';   
      return {travel: travel, travelpx: true, offset: offset, cssPos: cssPos};
    }
    else if (travel.search(/^\d+\s?%$/) != -1) {
      travel.replace('%', '');
      travel = parseInt(travel, 10) / 100;
    }
    else {
      travel=1;
    }
  }
  // Set offset constant used in moveLayers()
  offset = origin * (1 - travel);
  return {travel: travel, travelpx: false, offset: offset}
}

function setupLayer(layer, i, mouseport) {

  var xStuff;
  var yStuff;
  var cssObject = {};

  layer[i]=jQuery.extend({}, {
      width:        layer[i].element.width(),
      height:        layer[i].element.height()
  }, layer[i]);

  xStuff = parseTravel(layer[i].xtravel, layer[i].xorigin, layer[i].width);
  yStuff = parseTravel(layer[i].ytravel, layer[i].yorigin, layer[i].height);

  jQuery.extend(layer[i], {
      // Used in triggerResponse
      diffxrat:    mouseport.width / (layer[i].width - mouseport.width),
      diffyrat:    mouseport.height / (layer[i].height - mouseport.height),
      // Used in moveLayers
      xtravel:     xStuff.travel,
      ytravel:     yStuff.travel,
      xtravelpx:   xStuff.travelpx,
      ytravelpx:   yStuff.travelpx,
      xoffset:     xStuff.offset,
      yoffset:     yStuff.offset
  });
  
  // Set origin now if it won't be altered in moveLayers()
  if (xStuff.travelpx) {cssObject.left = xStuff.cssPos;}
  if (yStuff.travelpx) {cssObject.top = yStuff.cssPos;}
  if (xStuff.travelpx || yStuff.travelpx) {layer[i].element.css(cssObject);}
}

function setupLayerContents(layer, i, viewportOffset) {

  var contentOffset;

  // Give layer a content object
  jQuery.extend(layer[i], {content: []});
  // Layer content: get positions, dimensions and calculate element offsets for centering children of layers
  for (var n=0; n<layer[i].element.children().length; n++) {
      
      if (!layer[i].content[n])          layer[i].content[n]             = {};
      if (!layer[i].content[n].element)  layer[i].content[n]['element']  = layer[i].element.children().eq(n);
      
      // Store the anchor name if one has not already been specified.  You can specify anchors in Layer Options rather than html if you want.
    if(!layer[i].content[n].anchor && layer[i].content[n].element.children('a').attr('name')) {
        layer[i].content[n]['anchor'] = layer[i].content[n].element.children('a').attr('name');
      }
      
      // Only bother to store child's dimensions if child has an anchor.  What's the point otherwise?
      if(layer[i].content[n].anchor) {
      contentOffset = layer[i].content[n].element.offset();
          jQuery.extend(layer[i].content[n], {
              width:         layer[i].content[n].element.width(),
              height:        layer[i].content[n].element.height(),
              x:              contentOffset.left - viewportOffset.left,
              y:              contentOffset.top - viewportOffset.top
          });
          jQuery.extend(layer[i].content[n], { 
            posxrat:  (layer[i].content[n].x + layer[i].content[n].width/2) / layer[i].width,
            posyrat:  (layer[i].content[n].y + layer[i].content[n].height/2) / layer[i].height
      });
      }
  }
}

function moveLayers(layer, xratio, yratio) {

    var xpos;
    var ypos;
    var cssObject;
    
    for (var i=0; i<layer.length; i++) {
    
    // Calculate the moving factor
      xpos = layer[i].xtravel * xratio + layer[i].xoffset;
    ypos = layer[i].ytravel * yratio + layer[i].yoffset;
    cssObject = {};
      // Do the moving by pixels or by ratio depending on travelpx
    if (layer[i].xparallax) {
      if (layer[i].xtravelpx) {
        cssObject.marginLeft = xpos * -1 + 'px';
      } 
      else {
        cssObject.left = xpos * 100 + '%';
        cssObject.marginLeft = xpos * layer[i].width *-1 + 'px';
      }
      }
      if (layer[i].yparallax) {
      if (layer[i].ytravelpx) {
        cssObject.marginTop = ypos * -1 + 'px';
      }
      else {
        cssObject.top = ypos * 100 + '%';
        cssObject.marginTop = ypos * layer[i].height * -1 + 'px';
      }
    }
    layer[i].element.css(cssObject);
    }
}

// PLUGIN DEFINITION **********************************************************************

jQuery.fn.jparallax = function(options) {
    
    // Organise settings into objects (Is this a bit of a mess, or is it efficient?)
    var settings = jQuery().extend({}, jQuery.fn.jparallax.settings, options);
    var settingsLayer = {
              xparallax:                settings.xparallax,
              yparallax:                settings.yparallax,
              xorigin:                    settings.xorigin,
              yorigin:                    settings.yorigin,
              xtravel:          settings.xtravel,
              ytravel:          settings.ytravel
          };
  var settingsMouseport = {
              element:                    settings.mouseport,
                takeoverFactor:        settings.takeoverFactor,
                takeoverThresh:        settings.takeoverThresh
            };
    if (settings.mouseport) settingsMouseport['element'] = settings.mouseport;
    
    // Populate layer array with default settings
    var layersettings = [];
    for(var a=1; a<arguments.length; a++) {
        layersettings.push( jQuery.extend( {}, settingsLayer, arguments[a]) );
    }
    
    // Iterate matched elements
    return this.each(function() {

    // VAR
    
        var localmouse = {
                    x:                0.5,
                    y:                0.5
        };
        
    var virtualmouse = {
                    x:                0.5,
                    y:                0.5
        };
        
        var timer = {
          running:        false,
          frame:            settings.frameDuration,
          fire:                function(x, y) {
                                  positionMouse(mouseport, localmouse, virtualmouse);
                    moveLayers(layer, virtualmouse.x, virtualmouse.y);
                                  this.running = setTimeout(function() {
                                      if ( localmouse.x!=x || localmouse.y!=y || !mouseport.ontarget ) {
                                          timer.fire(localmouse.x, localmouse.y);
                                      }
                                      else if (timer.running) {
                                          timer.running=false;
                                      }
                                  }, timer.frame);
                                }
        };

        var viewport    =    {element: jQuery(this)};        

        var mouseport = jQuery.extend({}, {element: viewport.element}, settingsMouseport, {
          xinside:          false,        // is the mouse inside the mouseport's dimensions?
            yinside:            false,
            active:                false,        // are the mouse coordinates still being read?
            ontarget:         false            // is the top layer inside the takeoverThresh?
        });
    
        var layer            = [];
    
    // FUNCTIONS
    
    function matrixSearch(layer, ref, callback) {
      for (var i=0; i<layer.length; i++) {
        var gotcha=false;
        for (var n=0; n<layer[i].content.length; n++) {
          if (layer[i].content[n].anchor==ref) {
            callback(i, n);
            return [i, n];
          }
        }
      }
      return false;
    }
    
    // RUN
    
    setupPorts(viewport, mouseport);
        
        // Cycle through and create layers
    for (var i=0; i<viewport.element.children().length; i++) {
            // Create layer from settings if it doesn't exist
            layer[i]=jQuery.extend({}, settingsLayer, layersettings[i], {
                element:    viewport.element.children('*:eq('+i+')')
            });
            
          setupLayer(layer, i, mouseport);
      
      if (settings.triggerResponse) {
            setupLayerContents(layer, i, viewport.element.offset());
          }
        }
        
        
    
    // Set up layers CSS and initial position
    viewport.element.children().css('position', 'absolute');
        moveLayers(layer, 0.5, 0.5);
        
        // Mouse Response
        if (settings.mouseResponse) {
            jQuery().mousemove(function(mouse){
                // Is mouse inside?
                mouseport.xinside = (mouse.pageX >= mouseport.left && mouse.pageX < mouseport.width+mouseport.left) ? true : false;
                mouseport.yinside = (mouse.pageY >= mouseport.top  && mouse.pageY < mouseport.height+mouseport.top)  ? true : false;
                // Then switch active on.
                if (mouseport.xinside && mouseport.yinside && !mouseport.active) {
                    mouseport.ontarget = false;
                    mouseport.active = true;
                }
                // If active is on give localmouse coordinates
                if (mouseport.active) {
                    if (mouseport.xinside) { localmouse.x = (mouse.pageX - mouseport.left) / mouseport.width; }
                    else { localmouse.x = (mouse.pageX < mouseport.left) ? 0 : 1; }
                    if (mouseport.yinside) { localmouse.y = (mouse.pageY - mouseport.top) / mouseport.height; } 
                    else { localmouse.y = (mouse.pageY < mouseport.top) ? 0 : 1; }
                }
                
                // If mouse is inside, fire timer
                if (mouseport.xinside && mouseport.yinside)  { if (!timer.running) timer.fire(localmouse.x, localmouse.y); }
                else if (mouseport.active) { mouseport.active = false; }            
            });
        }
        
        // Trigger Response
        if (settings.triggerResponse) {
          viewport.element.bind("jparallax", function(event, ref){
            
            ref = stripFiletype(ref);
                  
        matrixSearch(layer, ref, function(i, n) {
          localmouse.x = layer[i].content[n].posxrat * (layer[i].diffxrat + 1) - (0.5 * layer[i].diffxrat);
          localmouse.y = layer[i].content[n].posyrat * (layer[i].diffyrat + 1) - (0.5 * layer[i].diffyrat);
  
          if (!settings.triggerExposesEdges) {
            if (localmouse.x < 0) localmouse.x = 0;
            if (localmouse.x > 1) localmouse.x = 1;
            if (localmouse.y < 0) localmouse.y = 0;
            if (localmouse.y > 1) localmouse.y = 1;
          }
          
          mouseport.ontarget = false;
          
          if (!timer.running) timer.fire(localmouse.x, localmouse.y);
        });
          });
        }
        
        // Window Resize Response
        jQuery(window).resize(function() {

          setupPorts(viewport, mouseport);
          for (var i=0; i<layer.length; i++) {
            setupLayer(layer, i, mouseport);
      }
        });
        
        
    });
};

// END OF PLUGIN DEFINITION **********************************************************************

// PLUGIN DEFAULTS

jQuery.fn.jparallax.settings = {
    mouseResponse:            true,                        // Sets mouse response
    mouseActiveOutside:        false,                    // Makes mouse affect layers from outside of the mouseport. 
    triggerResponse:        true,                      // Sets trigger response
  triggerExposesEdges:  false,          // Sets whether the trigger pulls layer edges into view in trying to centre layer content.
    xparallax:                    true,                        // Sets directions to move in
    yparallax:                    true,                        //
    xorigin:                        0.5,                    // Sets default alignment - only comes into play when travel is not 1
    yorigin:                        0.5,                    //
    xtravel:              1,              // Factor by which travel is amplified
    ytravel:              1,              //
    takeoverFactor:            0.65,                        // Sets rate of decay curve for catching up with target mouse position
    takeoverThresh:            0.002,                    // Sets the distance within which virtualmouse is considered to be on target, as a multiple of mouseport width.
    frameDuration:        25                            // In milliseconds
};

// RUN

initOrigin(jQuery.fn.jparallax.settings);

jQuery(function() {
    
});


// END CLOSURE

})(jQuery);