/*
 * Script to expand and retract images
 * add .image_enlarger to any image
 * Copyright (c) http://www.emperordesign.co.uk/
 * Ross Johnson
 */

$(window).load(function() {
    // get original width and height
    var originalwidth = $(".image_enlarger").attr('width');
    var originalheight = $(".image_enlarger").attr('height');

    // remove the width and height to get the original size of the image
    $(".image_enlarger").removeAttr('width');
    $(".image_enlarger").removeAttr('height');

    // store the new width and height
    var newwidth = $(".image_enlarger").attr('width');
    var newheight = $(".image_enlarger").attr('height');

    // add the image holder div, and resize it to original image size
    $("img.image_enlarger").wrap('<div class="image_holder"></div>');
    $(".image_holder").css({ 'width': originalwidth, 'height': originalheight, 'position': 'relative' });

    // add css required for 'pop-up' effect
    $("img.image_enlarger").css({ 'position': 'absolute', 'bottom': '0', 'left': '0' });

    // give the image it's original width and height
    $("img.image_enlarger").css('width', originalwidth);
    $("img.image_enlarger").css('height', originalheight);
    // on hover resize the image to the correct size.
    // on off state resize to the original size
    $("img.image_enlarger").hover(
		function() {
		    $("img.image_enlarger").stop().animate({ width: newwidth, height: newheight }, 600);
		},
		function() {
		    $("img.image_enlarger").stop().animate({ width: originalwidth, height: originalheight }, 600);
		}
	);
});