// JavaScript Document
/* -- ///////////////////////////////////////////
copyright 2010 FIELD co,ltd.
All Rights Reserved.
 
created: 2010.09.24 INOUE




[ USEAGE ]

$(function(){
	$('#fieldSlide').fieldSlide('li', {
		navId: 'slideNav',                             //ID to insert navigation *mandatory
		thumbContainer: 'slideThumb',                  //ID to insert thumbnails *mandatory
		thumbWidth: 80,                                //thumbnail width *mandatory
		thumbHeight: 80,                               //thumbnail *mandatory
		thumbBoxWidth: 490,                            //thumbnail box width *mandatory
		picWidth: 380,                                 //Gallery width *mandatory
		picHeight: 500,                                //Gallery height *mandatory
		prevImg: '/images/ex/fieldSlide/prev.gif',     //navigation 'prev' image URL
		prevWidth: null,                               //navigation 'prev' image width 
		prevHeight: null,                              //navigation 'prev' image height 
		prevAlt: null,                                 //navigation 'prev' image alt 
		nextImg: '/images/ex/fieldSlide/next.gif',     //navigation 'next' image URL
		nextWidth: null,                               //navigation 'next' image width 
		nextHeight: null,                              //navigation 'next' image height 
		nextAlt: null,                                 //navigation 'next' image alt 
		thumbMask: '/images/ex/fieldSlide/mask.gif',   //thumbnail 'mask' for current image 	
		thumbBorderWidth: 3,                           //thumbnail border-width
		thumbBorderColor: '#bfbfb8',                   //thumbnail border-color
		thumbPadding: 1,                               //thumbnail padding
		thumbMarginRight: 0,                           //thumbnail margin-right
		thumbMarginBottom: 0,                          //thumbnail margin-bottom
		autoThumbs: true,                              //jQuery to create thumbnail using Main Images
		ThumbsIMG: [],                                 //in case of false set to "autThumbs", give a list of thumbnails' url
		effect: 'fade',                                //fade or slide
		easing: 'swing',                               //for "slie" effect only
		stay: 5000,                                    //pausing duration for autoplay
		transition: 2500,                              //transition time
		autoStart: true,                               //true for enabling autoplay
		start: 0                                       //prefered starting frame default:0
	});
});

////////////////////////////////////////// -- */


$.fn.imageSlider = function(elem, options) {
	
	var opt = {
		picWidth: 380,
		picHeight: 500,
		nav: false,
		navId: 'slideNav',
		thumb: true,
		thumbContainer: 'slideThumb',
		thumbWidth: 80,
		thumbHeight: 80,
		thumbBoxWidth: 490,
		prevImg: '/k-bridal/images/ex/fieldSlide/prev.gif',
		prevWidth: null,
		prevHeight: null,
		prevAlt: null,
		nextImg: '/k-bridal/images/ex/fieldSlide/next.gif',
		nextWidth: null,
		nextHeight: null,
		nextAlt: null,
		thumbMask: '/k-bridal/images/ex/fieldSlide/mask.gif',
		thumbBorderWidth: 0,
		thumbBorderColor: '#ccc',
		thumbPadding: 0,
		thumbMarginRight: 0,
		thumbMarginBottom: 0,
		autoThumbs: true,
		ThumbsIMG: [],
		effect: 'slide', //fade or slide
		easing: 'swing', //for "slie" effect only
		stay: 5000,
		transition: 2500,
		autoStart: true,
		stopOnHover: false,
		start: 0,
		startEffect: 'easeInOutExpo',
		startDurarion: 3000
	}
	
	if(options) $.extend(opt, options);
	
		
	return this.each( function () {
		var curPic = $(this);
		var filmSize;
		var size;
	  	var i = opt.start;		
		var navid = '#'+opt.navId;
		var thumbBox = '#'+opt.thumbContainer;
		var paused = false;
		var setLoop = 0;
		var dist;
		var cur = 0;
		var filmData;
		var filmDataEnd;
		function init () {
			size = $(elem, curPic).not(navid).size();
			
			$("body").css({position: 'relative'});
			
			if(size > 1) {
				if(opt.effect == 'slide'){
					filmData = $(curPic).find(elem).clone();
					filmDataEnd = $(curPic).find(elem).clone();
					$(curPic).find(elem+":first").before(filmData);
					$(curPic).find(elem+":last").after(filmDataEnd);
					filmSize = $(elem, curPic).not(navid).size();
					
				}
				setPos();
				
				if(opt.nav){ makeNav(); }
				if(opt.thumb){ 
					makeThumb();
					//if(opt.effect == 'slide'){$(thumbBox).find(elem+":last").after($(thumbBox).find(elem+":first")); $(thumbBox).find(elem+":last").after($(thumbBox).find(elem+":first"));}
					makeMask();
				}
				show();
				var parentWidth = $(curPic).find(elem).width();
				var left = Math.floor(($(window).width() - parentWidth) / 2 );
				$(curPic).find(elem).parent().parent().css({"left": left +"px"});
				
			
				
				/** fieldweb only **/
				repeat = size - 1;
				var left_indent = parseInt($(curPic).find(elem).parent().css('left')) - opt.picWidth * repeat;
				$(curPic).find(elem).parent().not(":animated").animate({left: left_indent
														}, 0, opt.easing,function(){
															repeat = 0 - repeat;
															var repeat_abs = Math.abs(repeat);
															var right_indent = parseInt($(curPic).find(elem).parent().css('left')) + opt.picWidth * repeat_abs;
															
															$(curPic).find(elem).parent().not(":animated").animate({
																									left: right_indent
																									}, opt.startDurarion, opt.startEffect, function(){
																										for(val=0; val<repeat; val++){
																											$(curPic).find(elem+":last").after($(curPic).find(elem+":first"));
																										}
																										$(curPic).find(elem).parent().css({'left' : '-'+opt.picWidth * size +'px'});
																									}
																									);
															if($(curPic).find(elem).parent().not(":animated")){
																setLoop ++;
																cur = i;
																dist = null;
															}
				});
				
				
				/** fieldweb only **/
				
			}			
			
			if(i == 0){
				$(navid + " a[rel='prev']").hide();
			}
		}
		
			
			$(window).resize(function(){
									  
				var parentWidth = $(curPic).find(elem).width();
				var left = Math.floor(($(window).width() - parentWidth) / 2 );
				$(curPic).find(elem).parent().parent().css({"left": left +"px"});
			});
		
		function setPos () {
			$(curPic).find(elem).parent().css("position", "relative");
			if(opt.effect == 'fade'){
				$(curPic).find(elem).css("position", "absolute");
			}else if(opt.effect == 'slide'){
				$(curPic).find(elem).parent().css({
												  width: opt.picWidth * filmSize +'px',
												  top: '0px',
												  left: '-'+opt.picWidth * size +'px'
												  });
				$(curPic).find(elem).css("display", "inline");
				$(curPic).css("position", "relative");
			}		
		}

		
		
		function makeNav () {
			if(opt.prevWidth && opt.nextWidth){
				navStr = '<a href="javascript:void(0);" rel="prev" id="prev"><img src="'+opt.prevImg+'" width="'+opt.prevWidth+'" alt="'+opt.prevAlt+'" /></a>';
				navStr += '<a href="javascript:void(0);" rel="next" id="next"><img src="'+opt.nextImg+'" width="'+opt.nextWidth+'" alt="'+opt.nextAlt+'" /></a>';
			}else if(opt.prevHeight && opt.nextHeight){
				navStr = '<a href="javascript:void(0);" rel="prev" id="prev"><img src="'+opt.prevImg+'" height="'+opt.prevHeight+'" alt="'+opt.prevAlt+'" /></a>';
				navStr += '<a href="javascript:void(0);" rel="next" id="next"><img src="'+opt.nextImg+'" height="'+opt.nextHeight+'" alt="'+opt.nextAlt+'" /></a>';
			}else if(opt.prevHeight && opt.nextHeight && opt.prevWidth && opt.nextWidth){
				navStr = '<a href="javascript:void(0);" rel="prev" id="prev"><img src="'+opt.prevImg+'" width="'+opt.prevWidth+'" height="'+opt.prevHeight+'" alt="'+opt.prevAlt+'" /></a>';
				navStr += '<a href="javascript:void(0);" rel="next" id="next"><img src="'+opt.nextImg+'" width="'+opt.nextWidth+'" height="'+opt.nextHeight+'" alt="'+opt.nextAlt+'" /></a>';
			}else{
				navStr = '<a href="javascript:void(0);" rel="prev" id="prev"><img src="'+opt.prevImg+'" alt="'+opt.prevAlt+'" /></a>';
				navStr += '<a href="javascript:void(0);" rel="next" id="next"><img src="'+opt.nextImg+'" alt="'+opt.nextAlt+'" /></a>';
			}
			$(navid).append(navStr);
		}
		
		function makeThumb () {
			if(opt.autoThumbs){
				var thumbStr = '<ul><!--';
				for(var i = 0; i < size; i++) {
					if(opt.effect == 'slide'){
						var j = i +1;
						//j == -1 ? j = size - 1 : j == 0 ? j = size : j;
					}else{
						var j = i+1;
					}
					//var thumbItem = $(curPic).find(elem).find("img").not(navid).get(i);
					var thumbItem = filmData.find("img").not(navid).get(i);
					var w = $(thumbItem).width();
					var h = $(thumbItem).height();
					thumbStr += '--><li>';
					thumbStr += '<a href="javascript:void(0);" rel="'+j+'" style="width:'+opt.thumbWidth+'px; height:'+opt.thumbHeight+'px; overflow:hidden; display:block;">';
					if(w >= h){
						thumbStr += '<img src="'+thumbItem.src+'" height="'+opt.thumbHeight+'" alt="" />';		
					}else{
						thumbStr += '<img src="'+thumbItem.src+'" width="'+opt.thumbWidth+'" alt="" />';		
					}
					thumbStr += '</a></li><!--';
				}
				thumbStr += '--></ul>';
			}else{		
				if(opt.ThumbsIMG.length != 0){
					var thumbStr = '<ul><!--';
					var i = parseInt(i);
					for (var i in opt.ThumbsIMG) {
						if(opt.effect == 'slide'){
							var i = parseInt(i);
							var j = i +1;
							//j == -1 ? j = size - 1 : j == 0 ? j = size : j;
						}else{
							var j = i+1;
						}
						//alert(j);
						var img = new Image();
						img.src = opt.ThumbsIMG[i].url;
						thumbStr += '--><li>';
						thumbStr += '<a href="javascript:void(0);" rel="'+j+'" style="width:'+opt.thumbWidth+'px; height:'+opt.thumbHeight+'px; overflow:hidden; display:block;">';
						thumbStr += '<img src="'+img.src+'" width="'+opt.thumbWidth+'" height="'+opt.thumbHeight+'" alt="" />';
						thumbStr += '</a></li><!--';
					}
					thumbStr += '--></ul>';
				}

			}
				$(thumbBox).append(thumbStr);
				$(thumbBox).find("ul").css({
										   width: opt.thumbBoxWidth
										   });
				$(thumbBox).find("li").css({
										   width: opt.thumbWidth+'px',
										   height: opt.thumbHeight+'px',
										   float: 'left',
										   margin: '0 ' + opt.thumbMarginRight+'px '+ opt.thumbMarginBottom +'px 0',
										   border: opt.thumbBorderWidth+'px solid '+opt.thumbBorderColor,
										   padding: opt.thumbPadding+'px',
										   overflow: 'hidden'
										   });
				$(thumbBox).find("li:last").css({
										   width: opt.thumbWidth+'px',
										   height: opt.thumbHeight+'px',
										   float: 'left',
										   margin: '0 0px '+ opt.thumbMarginBottom +'px 0',
										   border: opt.thumbBorderWidth+'px solid '+opt.thumbBorderColor,
										   padding: opt.thumbPadding+'px',
										   overflow: 'hidden'
										   });
		}
		
		function makeMask () {
			thumbMask = '<img id="mask" rel="mask" src="'+opt.thumbMask+'" width="'+opt.thumbWidth+'" height="'+opt.thumbHeight+'" alt="" />';
			$(thumbBox).prepend(thumbMask);
			$(thumbBox).css("position", "relative");
			var initPad = opt.thumbBorderWidth + opt.thumbPadding;
			var initDist = ((((opt.thumbBorderWidth + opt.thumbPadding) *2) + opt.thumbWidth) * i) + (10 * i) + initPad;
			$(thumbBox).find("img[rel='mask']").css({
													position: 'absolute',
													top: opt.thumbBorderWidth + opt.thumbPadding +'px',
													left: initDist
													})
			$(thumbBox).find("img[rel='mask']").fadeTo(0, 0.7);
			$(thumbBox).find("img[rel='mask']").css("cursor", "pointer");
		}
		
		function animateMask(){
			var initPad = opt.thumbBorderWidth + opt.thumbPadding;
			var leftDist = ((((opt.thumbBorderWidth + opt.thumbPadding) *2) + opt.thumbWidth) * i) + (opt.thumbMarginRight * i) + initPad;
			var topSize = Math.floor(opt.thumbBoxWidth / (opt.thumbWidth + (initPad*2) +opt.thumbMarginRight));
			var topNum = Math.floor((((opt.thumbWidth +(initPad*2)) * i +1 ) + (opt.thumbMarginBottom * (i))) / opt.thumbBoxWidth);
			var topDist = (((((opt.thumbBorderWidth + opt.thumbPadding) *2) + opt.thumbHeight) * topNum) + (opt.thumbMarginBottom * topNum) + initPad);
			var leftDistVer = ((((opt.thumbBorderWidth + opt.thumbPadding) *2) + opt.thumbWidth) * (i - (topSize*topNum))) + (opt.thumbMarginBottom *  (i - (topSize*topNum))) + initPad;
			if(i >= topSize){
					//$(thumbBox).find("img[rel='mask']").not(":animated").animate({
					$(thumbBox).find("img[rel='mask']").stop(false,false).animate({
																top: topDist+'px',
																left: leftDistVer+'px'
																}, 500 );
			}else{
					//$(thumbBox).find("img[rel='mask']").not(":animated").animate({
					$(thumbBox).find("img[rel='mask']").stop(false,false).animate({
																top: opt.thumbBorderWidth + opt.thumbPadding+'px',
																left: leftDist+'px'
																}, 500 );

			}
		}
		
		function show () {
			
			
			$(document).stopTime("transition");
			if(opt.effect == 'fade'){
				if(i == opt.start){
					if(typeof prevAct !== "undefined" && prevAct){
						$(curPic).find(elem).fadeOut(opt.transition);
					}else{
						$(curPic).find(elem).fadeOut(0);
					}
				}else{
					$(curPic).find(elem).fadeOut(opt.transition);
				}
				var show = $(curPic).find(elem).get(i);
				$(show).fadeIn(opt.transition);
			}else if(opt.effect == 'slide'){
				//var initPos = opt.picWidth;
				
				var repeat = parseInt(dist)-parseInt(cur);
				var repeat_abs = Math.abs(repeat);
				
				if(repeat > 0){
					var left_indent = parseInt($(curPic).find(elem).parent().css('left')) - opt.picWidth * repeat;
				}else{
					var left_indent = parseInt($(curPic).find(elem).parent().css('left')) - opt.picWidth;
				}
				
				if(repeat < 0){
					var right_indent = parseInt($(curPic).find(elem).parent().css('left')) + opt.picWidth * repeat_abs;
				}else{
					var right_indent = parseInt($(curPic).find(elem).parent().css('left')) + opt.picWidth;
				}
				
				
				if(i > 0 || setLoop > 0){
					if(dist != null){
						if(repeat > 0){
							//$(curPic).find(elem).parent().not(":animated").stop(true,false).animate({
							$(curPic).find(elem).parent().stop(true,true).animate({
														left: left_indent
														}, opt.transition, opt.easing, function(){
															for(val=0; val<repeat; val++){
																$(curPic).find(elem+":last").after($(curPic).find(elem+":first"));
															}
															$(curPic).find(elem).parent().css({'left' : '-'+opt.picWidth * size +'px'});
														}
														);
							if($(curPic).find(elem).parent().not(":animated")){
								setLoop ++;
								cur = i;
								dist = null;
							}
							
						}else{
							
							var repeat_abs = Math.abs(repeat);
							//$(curPic).find(elem).parent().not(":animated").stop(true,true).animate({
							$(curPic).find(elem).parent().stop(true,true).animate({
														left: right_indent
														}, opt.transition, opt.easing, function(){
															for(val=0; val < repeat_abs; val++){
																$(curPic).find(elem+":first").before($(curPic).find(elem+":last"));
															}
															$(curPic).find(elem).parent().css({'left' : '-'+opt.picWidth * size +'px'});
														}
														);
							if($(curPic).find(elem).parent().not(":animated")){
								setLoop ++;
								cur = i;
								dist = null;
							}
						}
					}else{
						$(curPic).find(elem).parent().not(":animated").animate({
														left: left_indent
														}, opt.transition, opt.easing, function(){
															$(curPic).find(elem+":last").after($(curPic).find(elem+":first"));
															$(curPic).find(elem).parent().css({'left' : '-'+opt.picWidth * size +'px'});
														}
														);
						if($(curPic).find(elem).parent().not(":animated")){
							setLoop ++;
							cur = i;
							dist = null;
						}
					}
				}

			}
			
			if(opt.autoStart == true){
				if(opt.stopOnHover){
					$(curPic).hover(function(){
											 $(document).stopTime("transition");
											 paused = true;
									},
									function(){
										$(document).everyTime(opt.stay, "transition", function(){
											showNext();
										}, 1);
										paused = false;
									}
									);
					if(!paused){
						$(document).stopTime("transition");
						$(document).everyTime(opt.stay, "transition", function(){
							showNext();
						}, 1);
					}

				}else{
					$(document).stopTime("transition");
					$(document).everyTime(opt.stay, "transition", function(){
						showNext();
					}, 1);
				}

			}
			
		}
		init();
		
		function showNext(){
					if(i + 1 < size) {
						i = i + 1;
					}else if(i + 1 == size) {
						i = 0;
					}
					if(i == 0){
						$(navid +" a[rel='prev']").fadeOut(150);
					}else{
						$(navid +" a[rel='prev']").fadeIn(150);
					}
					if(i == size - 1){
						$(navid +" a[rel='next']").fadeOut(150);
					}else{
						$(navid +" a[rel='next']").fadeIn(150);
					}
					show();
					animateMask();
		}
		
		
		
		
		$(navid).find("a").click(function () {

			if($(this).attr('rel') == 'next') {
				nextAct = 1;
				if(i + 1 < size) {
					i = i+1;
					animateMask();
				}
				if(i == 0){
					$(navid +" a[rel='prev']").fadeOut(150);
				}else{
					$(navid +" a[rel='prev']").fadeIn(150);
				}
				if(i == size - 1){
					$(navid +" a[rel='next']").fadeOut(150);
				}else{
					$(navid +" a[rel='next']").fadeIn(150);
				}
			} else if($(this).attr('rel') == 'prev') { 
				prevAct = 1;
				if(i > 0) {	
					i = i-1;
					animateMask();
				}
				if(i == 0){
					$(navid +" a[rel='prev']").fadeOut(150);
				}else{
					$(navid +" a[rel='prev']").fadeIn(150);
				}
				if(i == size -1 ){
					$(navid +" a[rel='next']").fadeOut(150);
				}else{
					$(navid +" a[rel='next']").fadeIn(150);
				}
			}		
			
			show();
			return false;
		});
		
				
		$(thumbBox).find("a").click(function () {
			dist = $(this).attr('rel') - 1;
			var j = $(this).attr('rel');
			
			if(j-1 == i){
				return false;
			}else{
				i = j-1;
				if($(curPic).find(elem).parent().not(":animated")){
					if($(this).parent().not(":animated")){
						animateMask();
					}
				}
			}
			if(i == 0){
				prevAct = 1;
				$(navid +" a[rel='prev']").fadeOut(150);
			}else{
				$(navid +" a[rel='prev']").fadeIn(150);
			}
			
			if(i == size - 1){
				$(navid +" a[rel='next']").fadeOut(150);
			}else{
				$(navid +" a[rel='next']").fadeIn(150);
			}
			if($(curPic).find(elem).parent().not(":animated")){
				if($(this).parent().not(":animated")){
					show();
				}
			}
			return false;
		});
		
		
	});
		
}