/* $.mk_imgHover
****************************************************************************
	
	-----------------------------------------------------------------------
	varsion     : 1.5
	author      : http://www.makinokobo.com - oosugi
	last update : 2010.10.19 - oosugi
	Copyright   : Copyright (c) 2010 Skill Partners Inc. All Rights Reserved.
	-----------------------------------------------------------------------
	
	$('SELECTOR').hoverLight();
	=========================================================================
	マウスオーバーで明るくなり、マウスアウトで元に戻る
	
	Config
	-------------------------------------------------------------------------
	$('SELECTOR').hoverLight({
		speed: 300,
		opacity: 0.7,
		bg: false
	});
	
	
	$('SELECTOR').hoverBlink();
	=========================================================================
	一瞬明るくなる
	
	Config
	-------------------------------------------------------------------------
	$('SELECTOR').hoverBlink({
		speed: 600,
		opacity: 0.3,
		bg: false
	});
	
	
	【注意】
	不透明度を上げるだけなので、背景が暗い場合は明るくならない。
	その場合は、Configでbg:trueを設定する。
	
	
	$('SELECTOR').hoverSwap();
	=========================================================================
	マウスオーバーで画像差し替え。
	同ディレクトリに「_on」を付けたファイルを置いて使う。
	
	Config
	-------------------------------------------------------------------------
	用意してない。
	
	
	$('SELECTOR').hoverSwapSmooth();
	=========================================================================
	マウスオーバーで画像差し替え。スムーズバージョン。
	同ディレクトリに「_on」を付けたファイルを置いて使う。
	
	
	Config
	-------------------------------------------------------------------------
	$('SELECTOR').hoverSwapSmooth(300); // スピードの設定が可能
	
	※現状、imgにfloatなどが入っているとレイアウトが崩れると思われるが、
	これはimgをdisplay:blockのspanでwrapするため。
	おそらくimgのすべてのスタイルをwrapしたspanに継承させるように改変することで対応可能。
	
	
****************************************************************************/
(function($){


$.fn.extend({
	mk_hoverWrap: function(bg){
		return this.each(function(){
			var cssW = $(this).css('width');
			var cssH = $(this).css('height');
			
			$(this)
				.css({
					display: 'block'
				})
				.closest('a')
					.css({
						float: 'left',
						display: 'block',
						width: cssW,
						height: cssH
					})
					.wrap('<span class="mk_imgHoverWrap"/>')
					.closest('.mk_imgHoverWrap')
						.css({
							display: 'block',
							height: cssH
						});
			
			if(bg){
				$(this).closest('.mk_imgHoverWrap').css({
					backgroundColor: '#FFF'
				});
			};
		});
	},
	
	// IE向け png32対応
	// 以下を解消
	// ・IE6でPNG32が使用できない
	// ・opacityを使っているためIE7/8もキワが汚くなる
	mk_hoverPng32: function(){
		var scriptSrc = $('script[src$=jquery.js]').attr('src');
		var scriptDir = scriptSrc.substring(0, scriptSrc.lastIndexOf("/")+1);
		
		if(navigator.userAgent.indexOf("MSIE") != -1){
			this.each(function(){
				var $png = $(this).filter('[src$=png]');
				
				// AlphaImageLoaderでPNGをセット
				$png
					.css({
						filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $(this).attr('src') + "')"
					})
					.attr('src',scriptDir+'iePng32.gif');
			});
		}
		return this;
	},
	
	mk_hoverLight: function(config){
		// default
		config = $.extend({
			speed: 300,
			opacity: 0.7,
			bg: false
		},config);
		
		var speed = config.speed;
		var opacity = config.opacity;
		var bg = config.bg;
		
		return this
			.mk_hoverWrap(bg)
			.mk_hoverPng32()
			.closest('a').hover(
				function(){
					$(this).stop(true,false).animate({'opacity': opacity}, speed);
				},
				function(){
					$(this).stop(true,false).animate({'opacity': 1}, speed);
				}
			)
			.click(function(){
				$(this).animate({'opacity': '1'}, speed);
			});
	},
	
	mk_hoverBlink: function(config){
		// default
		config = $.extend({
			speed: 600,
			opacity: 0.3,
			bg: false
		},config);
		
		var speed = config.speed;
		var opacity = config.opacity;
		var bg = config.bg;
		
		return this
			.mk_hoverWrap(bg)
			.mk_hoverPng32()
			.closest('a').mouseover(function(){
				$(this).css({'opacity': opacity});
				$(this).stop(true, false).animate({'opacity': '1'}, speed);
			});
	},
	
	mk_hoverSwap: function(){
		var image_cache = new Object();
		return this.each(function(i){
			var imgsrc = this.src;
			if(!imgsrc.match(/_on\./)){
				var dot = this.src.lastIndexOf('.');
				var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
				image_cache[this.src] = new Image();
				image_cache[this.src].src = imgsrc_on;
				$(this).hover(
					function(){ this.src = imgsrc_on; },
					function(){ this.src = imgsrc; });
			}
		});
	},
	
	mk_hoverSwapSmooth: function(speed){
		if(!speed){
			speed = 250;
		};
		return this.each(function(i){
			var imgsrc = this.src;
			var dot = this.src.lastIndexOf('.');
			var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4);
			var cssW = $(this).css('width');
			var cssH = $(this).css('hedight');
			
			$(this)
				.css({
					display: 'block'
				})
				.closest('a')
					.css({
						display: 'block',
						width: cssW,
						height: cssH,
						background: 'url('+imgsrc_on+') no-repeat'
					});
			$(this).hover(
				function(){
					$(this).stop(true,false).animate({
						opacity: 0
					},speed);
				},
				function(){
					$(this).stop(true,false).animate({
						opacity: 1
					},speed);
			});
		});
	}

});

$(function(){
	$('.hoverLight').mk_hoverLight();
	$('.hoverBlink').mk_hoverBlink();
	$('.hoverSwap').mk_hoverSwap();
	$('.hoverSwapSmooth').mk_hoverSwapSmooth();
});

})(jQuery);