/** v1.0000  **/

/**

Width and height of each image(pixels):

	width: 176
	height: 140

Padding (css padding, pixels):

	padding: 0

Zoom (magnification/reduction):
	
	zoom: 1.5


Example:
		<div id="mos" style="display: none">
			<img src="1.jpg"/>
			<img src="2.jpg"/>
			<img src="3.jpg"/>
			<img src="4.jpg"/>
			<img src="5.jpg"/>
		</div>
		<script type="text/javascript" src="jquery-latest.js"></script>
		<script type="text/javascript" src="mosaic.js"></script>
		<script type="text/javascript">
			$('#mosaic').mosaic({
				width: 176,
				height: 140,
				padding: 0,
				zoom: 1.5
			})
		</script>

**/

(function($) {

	$.fn.mosaic = function(options){

		var defaults = {
			cols : 3,
			height : 500,
			width : 400,
			zoom : 1.5,
			padding : 0
		}

		var options = $.extend(defaults, options);  

		var rows = 0;
		var zI = 1;

		$(this).each(function(){
			var obj = $(this);
			var items = $('img', obj);
			items.each(function(index){
				$(this).css({
					position:'absolute',
					cursor: 'pointer',
					zIndex: 0,
					top: (rows)*(options.height + options.padding*2),
					left: ((index)%options.cols)*(options.width + options.padding*2),
					height: options.height,
					width: options.width,
					background: '#fff',
					padding: options.padding
				});		
				$(this).attr('class',(rows+1) +' '+(index%options.cols+1));
				if ((index+1)%options.cols==0) rows++;
			});
			if (items.length%options.cols!=0) rows++;
			obj.css({height: rows*options.height, width: options.cols*options.width, position: 'relative'}).show();	
			

			items.hover(
				//mouseover
				function zoom(){  
					var x = parseInt($(this).css('left'));
					var y = parseInt($(this).css('top'));
					var nx;
					var ny;
					switch(true) {
						case x==0: nx = 0; break;
						case x==(options.width + options.padding*2)*(options.cols-1): nx = x - options.width*(options.zoom - 1); break;
						case (x>0 && x<(options.width + options.padding*2)*(options.cols-1)): nx = x - options.width*(options.zoom - 1)/2; break;
					}
					switch(true) {
						case y==0: ny = 0; break;
						case y==(options.height + options.padding*2)*(rows-1): ny = y - options.height*(options.zoom - 1); break;
						case (y>0 && y<(options.height + options.padding*2)*(rows-1)): ny = y - options.height*(options.zoom - 1)/2; break;
					}
					$(this).css({zIndex: zI++, border: '1px solid #bbb'});
					$(this).animate({height: options.height*options.zoom, width: options.width*options.zoom, left: nx, top: ny},250);
				},
				//mouseout
				function(){
					var xy = $(this).attr('class').split(' ');
					var x = (parseInt(xy[1])-1)*(options.width + options.padding*2);
					var y = (parseInt(xy[0])-1)*(options.height + options.padding*2);
					$(this).animate({height: options.height, width: options.width, left: x, top: y},250, function(){ $(this).css({zIndex: 0, border: 0}); });
				}
			);
		});
	}

})(jQuery);