/*
 * Functions responsible for image flipping effect.
 * Usage: 1) Add class 'hoverFlipping' to image element to achieve flipping effect;
 *        to such image has to exist second image file with following filename 
 *        pattern: IMAGE_NAME_over.IMG_TYPE (suffix '_over' is added at the end
 *        of filename).
 *        2) Add class 'hoverFlipping' to container which contains one or more images 
 * 			(images itself shoud not have marker class). Hover functionality 
 * 			will be attached to the container. 
 */

// ---           ---
// --- CONSTANTS ---
// ---           ---
var IMG_FLIPPING_TRIGGER_CLASS = 'hoverFlipping';	
var IMG_NO_FLIPPING_TRIGGER_CLASS = 'noHoverFlipping';	

// convention for static images
var HOVER_IMAGES_FILENAME_TAG = '_over';

// convention for images generated by Grails controller
var HOVER_IMAGES_PARAM_TAG = 'method';
var HOVER_IMAGES_PARAM_SUFFIX = 'Hover';


// ---                       ---
// --- FUNCTION DECLARATIONS --- 
// ---                       ---

function preloadImage(src) {
	j$('<img />').attr('src',src);
}

function initImagesFlipping() {
	var markedElements = j$('.' + IMG_FLIPPING_TRIGGER_CLASS);
	var elemImagePairs = [];

	j$.each(markedElements, function() {
			var elem = j$(this);
			if (elem.is('img')) {
				elemImagePairs.push([elem, elem])
			} else {
				j$.each(elem.find('img'), function() {
						var img = j$(this);
						if (!img.hasClass(IMG_NO_FLIPPING_TRIGGER_CLASS)) {
							elemImagePairs.push([elem, img]);	
						}
					}
				);
			}
		}
	);

	j$.each(elemImagePairs, 
		function() { 
			var elem = this[0];
			var img  = this[1];
			var imgSrc = img.attr('src');
			var hoverSrc = determineOverImageSrc(imgSrc);
			preloadImage(hoverSrc);
			elem.hover(
				function() { img.attr('src', hoverSrc); },
				function() { img.attr('src', imgSrc); }
			)
		}
	);
}


function determineOverImageSrc(imgSrc) {
    if (imgSrc.isImageName()) {
        return imgSrc.insertBeforeSuffix(HOVER_IMAGES_FILENAME_TAG);
    } else {
        return imgSrc.replace(
                new RegExp(HOVER_IMAGES_PARAM_TAG+"=([^&]+)"),
                           HOVER_IMAGES_PARAM_TAG+"=$1"+HOVER_IMAGES_PARAM_SUFFIX);
    }
}


// --- DOCUMENT HANDLER ---
j$(document).ready(function() {
	initImagesFlipping();
});