(function($) {
	$.fn.flip = function( options ) {  
		var defaults = {
			speed				: 200,
			flipObj				: 'img',
			open				: 'mouseenter',
			close				: 'mouseleave',
			openedClick			: function() {},
			state				: 'off',
			enlargePercent		: 30,
			animateAndEnlarge	: false
		};
		var options = $.extend(defaults, options);
		var state = options.state === 'off' ? false : true;
		var c = function(a, b) { return a - b; };
        var getHZ = function() {
            var all = document.getElementsByTagName('*');
            var mzs = [];
            mzs[0] = 0;
            for (var i=0; i<all.length; i++) {
                if (all[i].nodeType == 1) {
                    if (document.all) { if (all[i].currentStyle) { mz = all[i].currentStyle['zIndex']; if (!isNaN(mz)) { mzs.push(mz); } } else if (window.getComputedStyle) { mz = document.defaultView.getComputedStyle(all[i], null).getPropertyValue('zIndex'); if (!isNaN(mz)) { mzs.push(mz); } }
                    } else { if (all[i].currentStyle) { mz = all[i].currentStyle['z-index']; if (!isNaN(mz)) { mzs.push(mz); } } else if (window.getComputedStyle) { mz = document.defaultView.getComputedStyle(all[i], null).getPropertyValue('z-index'); if (!isNaN(mz)) { mzs.push(mz); } } }
                }
            }
            mzs = mzs.sort(c);
            var h = parseInt(mzs[mzs.length - 1]);
            if ( h == 0 ) {
                h = 100;
			}
            return h;
        };
		return this.each(function() {
			var width = this.offsetWidth;
			var height = this.offsetHeight;
			var position = $(this).css('position');
			var wscale = !isNaN(options.enlargePercent) ? (options.enlargePercent / width) * width : (10 / width) * width;
			var hscale = !isNaN(options.enlargePercent) ? (options.enlargePercent / width) * height : (10 / width) * height;
			
			var animate = options.animateAndEnlarge ? { height: (height + hscale) + 'px', width: (width + wscale) + 'px', 'margin-left': '-' + (wscale/2) + 'px', 'margin-top': '-' + (hscale/2) + 'px' } : { height: height + 'px', width: width + 'px', 'margin-left': '0px' };
			
			$(this).find(options.flipObj).bind('click', options.openedClick);
			if ( !state ) {
				$(this)[options.open](function(e) {
					$(this).css({ 'position': 'relative', 'z-index': 999 });
					$(this).find(options.flipObj)
						.css({ display: 'block', 'z-index': 999 })
						.stop().css({ width: width + 'px', height: height + 'px' })
						.animate(animate, options.speed, 'linear', function() {});
				});
			} else {
				$(this)[options.open](function(e) {
					$(this).css({ 'position': 'relative', 'z-index': 999 });
					$(this).find(options.flipObj)
						.css({ display: 'block', 'z-index': 999 })
						.animate({ height: (height + hscale) + 'px', width: (width + wscale) + 'px', 'margin-left': '-' + (wscale/2) + 'px', 'margin-top': '-' + (hscale/2) + 'px' }, options.speed, 'linear', function() {});
				});
			}
			
			if ( !state ) {
				$(this)[options.close](function(e) {
					$(this).css({ 'position': position });
					$(this).find(options.flipObj)
						.stop().animate({ height: height + 'px', width: width + 'px', 'margin-left': '0px', 'margin-top': '0px' }, options.speed, 'linear', function() {
							$(this).css({ display: 'none', width: width + 'px', height: height + 'px' });
						});
				});
			} else {
				$(this)[options.close](function(e) {
					$(this).css({ 'position': position });
					$(this).find(options.flipObj)
						.stop().animate({ height: height + 'px', width: width + 'px', 'margin-left': '0px', 'margin-top': '0px' }, options.speed, 'linear', function() {});
				});
			}
		});
	};

var liIndex = 0;
var state = 'off';

/* initially wait 4 seconds */
var initial_wait = 4000;
/* approx 24 images over the next 4 seconds */
var overall_delay = 300;

function fade( options ) {
	var defaults = {
		speed		: 100,
		state		: 'off',
		ary			: [],
		complete	: function() {}
	};
	var options = $.extend(defaults, options);
	if ( liIndex < options.ary.length ) {
		setTimeout(function() {
			var el = $(options.ary).get(liIndex);
			var img = $('img', el);
			var height = el.offsetHeight;
			var width = el.offsetWidth;
			var position = $(el).css('position');
			if ( options.state === 'off' ) {
				$(img).stop().fadeOut(200, function() {
					liIndex++;
					if ( liIndex >= options.ary.length ) {
						options.complete.call(this, this);
					}
					setTimeout(function() {
						fade({ speed: 0, ary: options.ary, state: options.state, complete: options.complete });
					}, overall_delay);
				});
			} else if ( options.state === 'on' ) {
				$(img).stop().fadeIn(200, function() {
						liIndex++;
						if ( liIndex >= options.ary.length ) {
							options.complete.call(this, this);
						}
						setTimeout(function() {
							fade({ speed: 0, ary: options.ary, state: options.state, complete: options.complete });
						}, overall_delay);
					});
			}
		}, options.speed);
	}
};

function doFade(options) {
	var defaults = {
		speed		: 1000,
		state		: 'off',
		randomize	: false,
		complete	: function() {}
	};
	var options = $.extend(defaults, options);
	var ary = $('.image-flip li');
	if ( options.randomize ) {
		/* randomize the initial flipping */
		ary.sort(function() { return (Math.round(Math.random())-0.5); });
		ary.sort(function() { return (Math.round(Math.random())-0.5); });
	}
	/* start the initial flip */
	fade({ speed: options.speed, ary: ary, state: options.state, complete: options.complete });
};

$(function() {

	$('.image-flip li').flip({
		state				: state,
		animateAndEnlarge	: true,
		openedClick			: function() {
			$('#pic-show').attr('src', $(this).attr('src'));
		}
	});
	
	setTimeout(function() {
		doFade({
			randomize	: true,
			complete	: function() {
				$('#btnToggleState').removeAttr('disabled');
			}
		});
	}, initial_wait);

	
	$('#btnToggleState').click(function() {
		var btn = this;
		$(btn).attr('disabled', 'disabled');
		liIndex = 0;
		state = state === 'off' ? 'on' : 'off';
		doFade({
			speed		: 10,
			randomize	: true,
			state		: state,
			complete	: function() {
				$(btn).removeAttr('disabled');
			}
		});
		$('.image-flip li').unbind().flip({
			state				: state,
			speed				: 5,
			animateAndEnlarge	: true,
			openedClick			: function() {
				$('#pic-show').attr('src', $(this).attr('src'));
			}
		});
		$(this).val(state == 'off' ? 'Toggle Over': 'Toggle Out').css('color', state == 'off' ? 'black' : 'red');
	});

});

})(jQuery);