$(window).ready(function () {

	$('a').filter(function () {
		var str = $(this).attr('id');
		
		if (str == undefined) return false;
		
		return str.indexOf('href') + 1
			|| str.indexOf('lastviewed') + 1
			|| str.indexOf('extra') + 1;
	}).mouseover(function () {
		var thumbContainer = $(this);
		var str = thumbContainer.attr('id');
		var suffix = '';
		if (str.indexOf('href') + 1) {
			suffix = 'href';
		} else if (str.indexOf('lastviewed') + 1) {
			suffix = 'lastviewed';
		} else if (str.indexOf('extra') + 1) {
			suffix = 'extra';
		}
		// Slicing image parameters
		var link = thumbContainer.attr('href');
		var params = link.slice(
                                    link.indexOf('?') + 1
				);
		params = params.split('&');
		var bigImage = {
				id: 0,
				width: 0,
				heigth: 0
		};

		// Making big image object
		for (var i = 0; i < params.length; i++) {
			var param = params[i].split('=');
			switch (param[0]) {
				case 'imgId':
					bigImage.id = param[1];
					break;
				case 'bW':
					bigImage.width = param[1];
					break;
				case 'bH':
					bigImage.heigth = param[1];
					break;
			}
		}
		// big image
		var srcBig = '/nail_' + bigImage.id + '_' + bigImage.width + '-'
						+ bigImage.heigth + '.img';
		var rootOfBigPic = $('#bigpic_' + suffix);
		var bigImgElement = $("<img>").attr("src", thumbContainer.children().attr('src'));
		rootOfBigPic.children().remove();
		bigImgElement.appendTo(rootOfBigPic);
                rootOfBigPic.parent().attr('href', thumbContainer.attr('href'));
		
		// Get thumb position and dimensions
		thumbTop = thumbContainer.children().offset().top;
		thumbLeft = thumbContainer.children().offset().left;
		var thumbWidth = thumbContainer.children().attr('width');
		var thumbHeight = thumbContainer.children().attr('height');
		
		// Set thumb position and dimensions to big image
		rootOfBigPic.children().attr('width', thumbWidth);
		rootOfBigPic.children().attr('heigth', thumbHeight);
		rootOfBigPic.children().css('display', 'block');
                var extraOffset = 0;
                switch (suffix) {
                    case 'href':
                        rootOfBigPic.css('left', thumbLeft); // + 270
                        rootOfBigPic.css('top',  thumbTop ); //  - thumbHeight + 8
                        break;
                    case 'lastviewed':
                        rootOfBigPic.css('left', thumbLeft);
                        rootOfBigPic.css('top',  thumbTop );
                        break;
                    case 'extra':
                        if (bigImage.width > 300) {
                            extraOffset = 130;
                        } else {
                            extraOffset = 70;
                        }
                        rootOfBigPic.css('left', thumbLeft );
                        rootOfBigPic.css('top',  thumbTop);
                        break;
                }
                
		// Animate zooming
		if (rootOfBigPic.children().attr('src') != srcBig) {
	        // mouse out
	        rootOfBigPic.mouseout(function() {
			// return;
	            $(this).children().stop().animate({
	                width: thumbWidth,
	                height: thumbHeight,
	                
	                // xy shift
	                "left" : 0,
	                "top"  : 0
	                
	                // margin shift
	                //marginTop:  d2_mt,
	                //marginLeft: d2_mt
	            },
	            1000,
	            function () {
	                $(this).parent().unbind('mouseout');
	                $(this).parent().css('display', 'none');
	            });
	        });        
    		
    		var dx = Math.round((bigImage.width  - thumbWidth)  / 2) + extraOffset;
    		var dy = Math.round((bigImage.heigth - thumbHeight) / 2);
    		
    		// margin shift
    		/*    var d1_mt  = '-=' + dx;
    		var d1_ml  = '-=' + dy;
    		var d2_mt = '+=' + dx;
    		var d2_ml = '+=' + dy;     */
    		
    		// X,Y shift
    		var x,y;
    		x = "-=" + dx + "px";
    		y = "-=" + dy + "px";
    		
    		/* alert(['dxdy', dx, dy, 'big', bigImage.width, bigImage.heigth, 
    			'Thm', thumbWidth, thumbHeight, 
    			'x0y0', thumbLeft, thumbTop,
    			'xy', x, y,
    			'' ]); /**/
    			
    		
			
			rootOfBigPic.css('display', 'block');
			//rootOfBigPic.children().stop().animate({
			bigImgElement.animate({
                            'width': bigImage.width,
                            'height': bigImage.heigth,
                            
                            // xy shift
                            'left' : x,
                            'top': y
                            
                            // margin shift
                            //'marginTop':  d1_mt,
                            //'marginLeft': d1_ml
				},
	            1000,
	            function () {
	            	bigImgElement.attr('src', srcBig);
                }); // END of animate
		}
		
		// stop event
		return false;
		
		
		// Big image preload and attach to div
		/* bImg = new Image();
		bImg.src = srcBig;
		bImg.onload = function () {
				bigImgElement.attr("src", $(this).attr('src'));
			};
                rootOfBigPic.children().attr('width', thumbWidth);
                rootOfBigPic.children().attr('heigth', thumbHeight);
                rootOfBigPic.children().attr('display', 'block');
                rootOfBigPic.css('display', 'block');
                rootOfBigPic.children().stop().animate({
                    position: 'absolute',
                    width: bigImage.width,
                    height: bigImage.heigth,
                    marginTop: '-=100',
                    marginLeft: '-=100'
                },
                1000,
                function () {
                    rootOfBigPic.mouseout(function() {
                        $(this).children().stop().animate({
                            position: 'absolute',
                            width: thumbWidth,
                            height: thumbHeight,
                            marginTop: '+=100',
                            marginLeft: '+=100'
                        },
                        1000,
                        function () {
                            $(this).parent().unbind('mouseout');
                            $(this).parent().css('display', 'none');
                        });
                    });
                }); */
	}); 
});