/*
 * multiRollover - jQuery Plugin
 * version: 1.2 (Fri, 7 Mar 2014)
 * @requires jQuery v1.7 or later
 * IE 8 (IE9, if using transparent PNG) or later
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Plugin page:
 * https://github.com/ixkaito/multirollover
 *
 * Download URL:
 * https://github.com/ixkaito/multirollover/archive/master.zip
 *
 * Copyright (c) 2013 KITE
 *
 */

;(function ($) {

	$.fn.multirollover = function (options) {

		var opts = $.extend({
			suffix		: '-on',
			duration	: 100,
			crossfade	: false
		}, options);

		var s = opts.suffix,
			d = opts.duration,
			c = opts.crossfade;

		return this.each(function(){

			$(this).parent('li').find('img').each(function(){

				var p, i, v, z, src, o;

				p = $(this).css('position');
				v = $(this).css('vertical-align');
				z = $(this).css('z-index');

				if(p == 'static' || p == 'relative'){

					if( $(this).css('display') == 'inline' && !$(this).parent().hasClass('multirollover-image')){
						$(this).wrap('<span class="multirollover-image" style="position:relative; display:inline-block; max-width:100%;">');
						$(this).css('position','static');
					}

				}

				i = $(this).parent('.multirollover-image');

				if(p == 'relative'){
					i.css('top' , $(this).css('top'));
					i.css('bottom' , $(this).css('bottom'));
					i.css('left' , $(this).css('left'));
					i.css('right' , $(this).css('right'));
				}

				i.css('vertical-align', v);

				if(z == 'auto'){
					z = 1;
				}else{
					z = z + 1;
				}

				src = $(this).attr('src');
				src = src.replace(/^(.*)(\.jpg|\.gif|\.png)$/g, '$1' + s + '$2');

				$(this).clone().attr('src', src).addClass('multirollover-image-on').insertBefore($(this)).css({
					position	: 'absolute',
					zIndex		: z,
					opacity		: 0
				});

				o = $(this).prev('.multirollover-image-on');

				if($(this).css('position') == 'static' || $(this).css('position') == 'relative'){

					o.css({
						top		: 0,
						left	: 0
					});

				}

				$(this).addClass('multirollover-image-off');

				o.on('error',function(){
					$(this).next('.multirollover-image-off').removeClass('multirollover-image-off');
					$(this).remove();
					return;
				});

			});

			var over = [
				{width: 295, height: 384},
				{width: 322, height: 344},
				{width: 326, height: 344},
				{width: 298, height: 371},
				{width: 294, height: 348}
			];
			var out = [
				{width: 248, height: 324, top: 33, left: 36},
				{width: 270, height: 290, top: 30, left: 36},
				{width: 273, height: 290, top: 21, left: 30},
				{width: 247, height: 312, top: 32, left: 32},
				{width: 246, height: 294, top: 27, left: 23}
			];

			$(this).on({
				'mouseover': function(){

					var idx = $(this).parent("li").index();
					$(this).parent('li').siblings().find('img.multirollover-image-on').each(function(){
						var i = $(this).parent('li').index();
						$(this).stop().animate({
							width: out[i]['width'],
							height: out[i]['height'],
							top: out[i]['top'],
							left: out[i]['left'],
							opacity: 0
						},d);
					});
					$(this).parent('li').siblings().find('img.multirollover-image-off').each(function(){
						$(this).stop().animate({opacity: 1},d);
					});
					$("#board .inner").css({
						'background-image': 'url(images/back_board.png)'
					});
					$("#board .inner div").hide();
					$("#board .inner div").eq(idx).css({
						'background-position': "0px 293px"
					}).show();

/*
					$(this).parent('li').find('.multirollover-image-on').stop().animate({
						opacity	: 1
					}, d);
*/

					$(this).parent('li').find('.multirollover-image-on').stop().animate({
						width: over[idx]['width'],
						height: over[idx]['height'],
						top: 0,
						left: 0,
						opacity: 1
					}, d);

					if(c){
						$(this).parent('li').find('.multirollover-image-off').stop().animate({
							opacity: 0
						}, d);
					}

				}
			});
		});
	};

})(jQuery);