/*
jQuery Plugin izage (Zoomable Image) v1.0.0
Requires: jsurl, jQuery 1.2.3+ (Not tested with earlier versions).
Author: Nico Westerdale
http://www.iconico.com
*/

(function() {

	var didSetup = false;
	var opts;
	var iNotBig, iImgs, iChipImgs, iFoot, iFootExtra, iCase, iBig, iChipBox, iChips, iSelected, iAltText;
	var iChip = 0;

	jQuery.fn.izage = function(options) {

		iChip = 0;

		opts = jQuery.extend({}, jQuery.fn.izage.defaults, options);

		//Set up events, only need to do this once
		if (!didSetup) {

			//set up variables and HTML
			jQuery(this).css(opts.css).append('<div></div>');
			
			iCase = jQuery(this).children('div');
			iCase.css(opts.casecss);
			iCase.append('<div id="divIzageBig"></div>');
			iBig = jQuery('#divIzageBig');
			iBig.css(opts.bigcss);
			iCase.append('<div id="divIzageChipBox"></div>');
			iChipBox = jQuery('#divIzageChipBox');
			iChipBox.css(opts.chipboxcss);
			iChipBox.append('<div></div>');
			iChipBox.children('div').css(opts.chipbackcss);
			iChipBox.append('<div id="divIzageChips"></div>');
			iChips = jQuery('#divIzageChips');
			iChips.css(opts.chipcss);
			iAltText = '';

			//hover chipbox over object passed in
			jQuery(this).hover(function(e){
				jQuery('#divIzageChipBox:has(img:visible)').stop().animate({'marginTop': '-' + iChipBox.height() + 'px'}, 300);
			}, function(e){
				iChipBox.stop().animate({'marginTop': '0px'}, 300);
			});
		}

		//add in big images if needed
		if (jQuery('.Izage' + opts.group).length == 0) {
			for (var j=0; j<opts.images.length; j++) {
			  iAltText = (typeof(opts.iAlts[j]) == "undefined") ? '': opts.iAlts[j]; // sets alt attr empty if alt text is undefined.
  			iBig.append('<img src="' + opts.images[j] + '" height="340" alt="' + iAltText + '" id="imgIzage' + opts.group + '_' + j + '" class="Izage' + opts.group + '" />');
  		
			}

			jQuery('.Izage' + opts.group).css(opts.bigcssimg);
		}

		//add in small images if needed
		if (jQuery('.Izage' + opts.group + 's').length == 0) {
			for (var i=0; i<opts.chipimages.length; i++)
				iChips.append('<img src="' + opts.chipimages[i] + '" width="40" height="40" alt="" id="imgIzage' + opts.group + '_' + i + 's" class="Izage' + opts.group + 's" />');
		}

		iImgs =			jQuery('#divIzageBig img');
		iChipImgs =		jQuery('#divIzageChipBox img');

		//Set up HTML, or replace it as it could change for the footers
		if (jQuery('#divIzageFootExtra').length == 0)
			jQuery(this).append('<div id="divIzageFootExtra"> </div>');
		iFootExtra = jQuery('#divIzageFootExtra');
		iFootExtra.css(opts.footnoteextracss).html(opts.footnoteextra);

		if (jQuery('#divIzageFoot').length == 0)
			jQuery(this).append('<div id="divIzageFoot"></div>');
		iFoot =	jQuery('#divIzageFoot');
		iFoot.css(opts.footnotecss).html(opts.footnote);

		//hover small chips, need to unbind as it's called again each time
		iChipImgs.unbind('hover').unbind('click').hover(function(e){
			jQuery(this).not(iChipImgs.eq(iSelected)).css(opts.imgfocuscss);
		}, function(e){
			jQuery(this).not(iChipImgs.eq(iSelected)).css(opts.imgcss);
		}).click(function(e){
			if (iSelected != iChipImgs.index(this)) {
				iSelected = iChipImgs.index(this);
				iChip = jQuery('#divIzageChipBox img:visible').index(this);
				//iChip.jsurlSave('chip');save to URL
				iChipImgs.css(opts.imgcss);
				jQuery(this).css(opts.imgselectcss);
				if (!iNotBig) {	//show correct big image
					jQuery('#divIzageBig img:visible').addUnique('#' + this.id.substring(0, this.id.length-1)).fadeToggle(opts.speed);
					page.reloadAssets();
				}
			}
		});

		//Select the right group of images
		if (opts.group != undefined) {

			if (!didSetup) {
				iChip = Math.max(0, Math.min(iChip.jsurlRead('chip'), jQuery('.Izage' + opts.group + 's').length-1));	//read URL
			}
			if (iChip == 0) iChip.jsurlRemove('chip');

			//show correct big image
			jQuery('.Izage' + opts.group).eq(iChip).add('#divIzageBig img:visible').fadeToggle(opts.speed);

			//show correct chip group
			iChipImgs.css('display', 'none');
			jQuery('.Izage' + opts.group + 's').css('display', 'inline');
			iNotBig = true;
			jQuery('.Izage' + opts.group + 's').eq(iChip).click();	//selects the correct images
			iNotBig = false;

			//show footer as needed
			if (jQuery('#divIzageChipBox:has(img:visible)').length == 0) {
				iFoot.hide();
			} else {
				iFoot.show();
			}

		}

    // open the chips whenever we clicked on a new image...
	  jQuery('#divIzageChipBox:has(img:visible)').stop().animate({'marginTop': '-' + iChipBox.height() + 'px'}, 300);


		if (!didSetup) {
		  didSetup = true;
		}  

	}

	//Set option defaults
	jQuery.fn.izage.defaults = {
		images: [],				// array of strings for image urls
		iAlts: [], // array of alts for images (large ones)
		chipimages: [],			// array of strings for smaller image urls
		speed: 500,				// speed of fade
		group: 0,				// which image group initially selected
		footnote: '<img src="/i/slideshows/miniMagnifier.gif" width="10" height="13" alt="click images to view details" style="float:left; margin:2px 4px 0 7px;" /> click images to view details.',			//rollover footer HTML
		footnotecss: {padding: '4px 0', backgroundColor: '#efede1', color: '#666', fontSize: '11px'},
		footnoteextra: null,		// extra footer HTML, used for the clip icon
		footnoteextracss: {'float': 'right', margin: '3px 7px', display: 'inline'},
		imgcss: {position: 'relative', padding: '1px', margin: '4px', cursor: 'pointer', borderWidth: '0px', borderStyle: 'solid', backgroundColor: 'transparent', verticalAlign: 'bottom'},
		imgfocuscss: {borderColor: '#af7f5b', borderWidth:'3px', margin:'1px'},
		imgselectcss: {borderColor: '#643E37', borderWidth:'3px', margin:'1px', backgroundColor: '#fff'},
		css: {width: '340px', height: '340px'},
		casecss: {height: '340px', overflow: 'hidden', position: 'relative'},
		bigcss: {width: '340px', height: '340px'},
		bigcssimg: {display: 'none', verticalAlign: 'bottom'},
		chipboxcss: {position: 'relative', zIndex:'1'},
		chipbackcss: {position: 'absolute', height: '100%', width: '100%', backgroundColor: '#efede1', opacity: '.70', filter: 'alpha(opacity=70)' },
		chipcss: {position: 'relative', padding:'4px'}
	}

	//Note addUnique is my way around a jQuery bug, which should be fixed shortly
	//http://groups.google.com/group/jquery-en/browse_thread/thread/9f4e76ad29237065/abcfb4f702f0f32c

	//Set up private jQuery methods
	var newMethods = {
		fadeToggle: function(speed, easing, callback) {
			return this.animate({opacity: 'toggle'}, speed, easing, callback);
		},
		addUnique: function(selector) {
			return this.filter(function (index) {
				return (jQuery(this).get(0) != jQuery(selector).get(0))
			}).add(selector);
		}
	};
	jQuery.each(newMethods, function(i) {
		jQuery.fn[i] = this;
	});

})();