/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify = {
  dsettings: {
    magnifyby: 3, //default increase factor of enlarged image
    duration: 500, //default duration of animation, in millisec
    imgopacity: 0.2 //opacify of original image when enlarged image overlays it
  },
  cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
  zIndexcounter: 100,

  refreshoffsets: function ($window, $target, warpshell) {
    var $offsets = $target.offset()
    var winattrs = { x: $window.scrollLeft(), y: $window.scrollTop(), w: $window.width(), h: $window.height() }
    warpshell.attrs.x = $offsets.left //update x position of original image relative to page
    warpshell.attrs.y = $offsets.top
    warpshell.newattrs.x = winattrs.x + winattrs.w / 2 - warpshell.newattrs.w / 2
    warpshell.newattrs.y = winattrs.y + winattrs.h / 2 - warpshell.newattrs.h / 2
    if (warpshell.newattrs.x < winattrs.x + 5) { //no space to the left?
      warpshell.newattrs.x = winattrs.x + 5
    }
    else if (warpshell.newattrs.x + warpshell.newattrs.w > winattrs.x + winattrs.w) {//no space to the right?
      warpshell.newattrs.x = winattrs.x + 5
    }
    if (warpshell.newattrs.y < winattrs.y + 5) { //no space at the top?
      warpshell.newattrs.y = winattrs.y + 5
    }
  },

  magnify: function ($, $target, options) {
    var setting = {} //create blank object to store combined settings
    var setting = jQuery.extend(setting, this.dsettings, options)
    var attrs = (options.thumbdimensions) ? { w: options.thumbdimensions[0], h: options.thumbdimensions[1]} : { w: $target.outerWidth(), h: $target.outerHeight() }
    var newattrs = {}
    newattrs.w = (setting.magnifyto) ? setting.magnifyto : Math.round(attrs.w * setting.magnifyby)
    newattrs.h = (setting.magnifyto) ? Math.round(attrs.h * newattrs.w / attrs.w) : Math.round(attrs.h * setting.magnifyby)
    $target.css('cursor', jQuery.imageMagnify.cursorcss)
    if ($target.data('imgshell')) {
      $target.data('imgshell').$clone.remove()
      $target.css({ opacity: 1 }).unbind('click.magnify')
    }
    var $clone = $target.clone().css({ position: 'absolute', left: 0, top: 0, visibility: 'hidden', border: '1px solid gray', cursor: 'pointer' }).appendTo(document.body)
    $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
    $target.data('imgshell', { $clone: $clone, attrs: attrs, newattrs: newattrs })
    $target.bind('click.magnify', function (e) { //action when original image is clicked on
      var $this = $(this).css({ opacity: setting.imgopacity })
      var imageinfo = $this.data('imgshell')
      jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
      var $clone = imageinfo.$clone
      $clone.stop().css({ zIndex: ++jQuery.imageMagnify.zIndexcounter, left: imageinfo.attrs.x, top: imageinfo.attrs.y, width: imageinfo.attrs.w, height: imageinfo.attrs.h, opacity: 0, visibility: 'visible', display: 'block' })
			.animate({ opacity: 1, left: imageinfo.newattrs.x, top: imageinfo.newattrs.y, width: imageinfo.newattrs.w, height: imageinfo.newattrs.h }, setting.duration,
			function () { //callback function after warping is complete
			  //none added		
			}) //end animate
    }) //end click
    $clone.click(function (e) { //action when magnified image is clicked on
      var $this = $(this)
      var imageinfo = $this.data('$relatedtarget').data('imgshell')
      jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
      $this.stop().animate({ opacity: 0, left: imageinfo.attrs.x, top: imageinfo.attrs.y, width: imageinfo.attrs.w, height: imageinfo.attrs.h }, setting.duration,
			function () {
			  $this.hide()
			  $this.data('$relatedtarget').css({ opacity: 1 }) //reveal original image
			}) //end animate
    }) //end click
  }
};

jQuery.fn.imageMagnify = function (options) {
  var $ = jQuery
  return this.each(function () { //return jQuery obj
    var $imgref = $(this)
    if (this.tagName != "IMG")
      return true //skip to next matched element
    if (parseInt($imgref.css('width')) > 0 && parseInt($imgref.css('height')) > 0 || options.thumbdimensions) { //if image has explicit width/height attrs defined
      jQuery.imageMagnify.magnify($, $imgref, options)
    }
    else if (this.complete) { //account for IE not firing image.onload
      jQuery.imageMagnify.magnify($, $imgref, options)
    }
    else {
      $(this).bind('load', function () {
        jQuery.imageMagnify.magnify($, $imgref, options)
      })
    }
  })
};

jQuery.fn.applyMagnifier = function (options) { //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
  var $ = jQuery
  return this.each(function () { //return jQuery obj
    var $imgref = $(this)
    if (this.tagName != "IMG")
      return true //skip to next matched element

  })

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function ($) {
  var $targets = $('.magnify')
  $targets.each(function (i) {
    var $target = $(this)
    var options = {}
    if ($target.attr('data-magnifyto'))
      options.magnifyto = parseFloat($target.attr('data-magnifyto'))
    if ($target.attr('data-magnifyby'))
      options.magnifyby = parseFloat($target.attr('data-magnifyby'))
    if ($target.attr('data-magnifyduration'))
      options.duration = parseInt($target.attr('data-magnifyduration'))
    $target.imageMagnify(options)
  })
  var $triggers = $('a[rel^="magnify["]')
  $triggers.each(function (i) {
    var $trigger = $(this)
    var targetid = $trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
    $trigger.data('magnifyimageid', targetid)
    $trigger.click(function (e) {
      $('#' + $(this).data('magnifyimageid')).trigger('click.magnify')
      e.preventDefault()
    })
  })
})

/*Image Power Zoomer v1.1 (June 18th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.

jQuery.noConflict()

var ddpowerzoomer = {
  dsetting: { defaultpower: 2, powerrange: [2, 7], magnifiersize: [75, 75] },
  mousewheelevt: (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
  $magnifier: { outer: null, inner: null, image: null },
  activeimage: null,

  movemagnifier: function (e, moveBol, zoomdir) {
    var activeimage = ddpowerzoomer.activeimage //get image mouse is currently over
    var activeimginfo = activeimage.info
    var coords = activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
    var $magnifier = ddpowerzoomer.$magnifier
    var magdimensions = activeimginfo.magdimensions //get dimensions of magnifier
    var power = activeimginfo.power.current
    var powerrange = activeimginfo.power.range
    var x = e.pageX - coords.left //get x coords of mouse within image (where top corner of image is 0)
    var y = e.pageY - coords.top
    if (moveBol == true) {
      if (e.pageX >= coords.left && e.pageX <= coords.right && e.pageY >= coords.top && e.pageY <= coords.bottom)  //if mouse is within currently within boundaries of active base image
        $magnifier.outer.css({ left: e.pageX - magdimensions[0] / 2, top: e.pageY - magdimensions[1] / 2 })	//move magnifier so it follows the cursor
      else { //if mouse is outside base image
        ddpowerzoomer.activeimage = null
        $magnifier.outer.hide() //hide magnifier
      }
    }
    else if (zoomdir) { //if zoom in
      var od = activeimginfo.dimensions //get dimensions of image
      var newpower = (zoomdir == "in") ? Math.min(power + 1, powerrange[1]) : Math.max(power - 1, powerrange[0]) //get new power from zooming in or out
      var nd = [od[0] * newpower, od[1] * newpower] //calculate dimensions of new enlarged image within magnifier
      $magnifier.image.css({ width: nd[0], height: nd[1] })
      activeimginfo.power.current = newpower //set current power to new power after magnification
    }
    power = activeimginfo.power.current //get current power
    var newx = -x * power + magdimensions[0] / 2 //calculate x coord to move enlarged image
    var newy = -y * power + magdimensions[1] / 2
    $magnifier.inner.css({ left: newx, top: newy }) //move image wrapper within magnifier so the correct image area is shown
  },

  setupimage: function ($, imgref, options) {
    var s = jQuery.extend({}, ddpowerzoomer.dsetting, options)
    var $imgref = $(imgref)
    imgref.info = { //create object to remember various info regarding image 
      power: { current: s.defaultpower, range: s.powerrange },
      magdimensions: s.magnifiersize,
      dimensions: [$imgref.width(), $imgref.height()],
      coords: null
    }
    $imgref.unbind('mouseenter').mouseenter(function (e) { //mouseenter event over base image
      var $magnifier = ddpowerzoomer.$magnifier
      $magnifier.outer.css({ width: s.magnifiersize[0], height: s.magnifiersize[1] }) //set magnifier's size
      var offset = $imgref.offset() //get image offset from document
      var power = imgref.info.power.current
      $magnifier.inner.html('<img src="' + options.largeimagesrc + '"/>') //get base image's src and create new image inside magnifier based on it
      $magnifier.image = $magnifier.outer.find('img:first')
				.css({ width: imgref.info.dimensions[0] * power, height: imgref.info.dimensions[1] * power }) //set size of enlarged image
      var coords = { left: offset.left, top: offset.top, right: offset.left + imgref.info.dimensions[0], bottom: offset.top + imgref.info.dimensions[1] }
      imgref.info.coords = coords //remember left, right, and bottom right coordinates of image relative to doc
      $magnifier.outer.show()
      ddpowerzoomer.activeimage = imgref
    })
  },


  init: function ($) {
    var $magnifier = $('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')
			.append('<div style="position:relative;left:0;top:0;" />')
			.appendTo(document.body) //create magnifier container and add to doc
    ddpowerzoomer.$magnifier = { outer: $magnifier, inner: $magnifier.find('div:eq(0)'), image: null} //reference and remember various parts of magnifier
    $magnifier = ddpowerzoomer.$magnifier
    $(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function (e) { //bind mousemove event to doc
      if (ddpowerzoomer.activeimage) { //if mouse is currently over a magnifying image
        ddpowerzoomer.movemagnifier(e, true) //move magnifier
      }
    }) //end document.mousemove

    $magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function (e) { //bind mousewheel event to magnifier
      if (ddpowerzoomer.activeimage) {
        var delta = e.detail ? e.detail * (-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        if (delta <= -120) { //zoom out
          ddpowerzoomer.movemagnifier(e, false, "out")
        }
        else { //zoom in
          ddpowerzoomer.movemagnifier(e, false, "in")
        }
        e.preventDefault()
      }
    })
  }
} //ddpowerzoomer

jQuery.fn.addpowerzoom = function (options) {  
  var $ = jQuery
  return this.each(function () { //return jQuery obj
    if (this.tagName != "IMG")
      return true //skip to next matched element
    if (typeof options == "undefined")
      options = {}
    if (options.largeimage && options.largeimage.length > 0) { //preload large image?
      options.preloadimg = new Image()
      options.preloadimg.src = options.largeimage
    }
    var $imgref = $(this)
    options.largeimagesrc = (options.preloadimg) ? options.preloadimg.src : $imgref.attr('src')
    if (parseInt(this.style.width) > 0 && parseInt(this.style.height) > 0) //if image has explicit CSS width/height defined
      ddpowerzoomer.setupimage($, this, options)
    else if (this.complete) { //account for IE not firing image.onload
      ddpowerzoomer.setupimage($, this, options)
    }
    else {
      $imgref.bind('load', function () {
        ddpowerzoomer.setupimage($, this, options)
      })
    }
  })
}

jQuery(document).ready(function ($) { //initialize power zoomer on DOM load
  ddpowerzoomer.init($)
})