// 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);