//Javascript Document

/*
* jQuery VisualSlider plugin
* Version 1.0 (20/07/2011)
* @requires jQuery latest
*
* Copyright (c) 2011 FIELD Co., Ltd.
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* 
*/

// Settings how to....
/************************************
*
width: 596,												// Width of Visual Image.
height: 240,											// Height of Visual Image.
padding: 0,												// Padding for thumbnails.
thumbShow: 3,											// How many thumbs to show
prefix: '_s',											// Prefix for thumbnail image.
thumbWidth: 184,										// thumbnail width
thumbHeight: 56,										// thumbnail height	
btnPrev: 'images/top/visual/btnPrev.gif',				// prev button URL
prevWidth: 10,											// Its width		
prevHeight: 57,											// Its Height
btnNext: 'images/top/visual/btnNext.gif',				// next button URL
nextWidth: 10,											// Its width
nextHeight: 57,											// Its height	
controllID: 'controll',									// id attribute for navigation container div.
stay: 5000,												// Hwo long to stay in case of auto play
transition: 1000,										// transition duration
autoStart: true,										// true for auto start
loader: '../../../design730/images/ajax-loader.gif'		// loding image URL
*
*************************************/



(function($) {

    $.fn.visualSlider = function(elem, options) {

        var opt = $.extend({}, $.fn.visualSlider.defaults, options);
		var i = 0;
		var visualContentainer = $(this);
		var controllBox = '#'+ opt.controllID;
		
		//$(elem, visualContentainer).not(controllBox).hide();
		
		return this.each(function(){
			
			var size;
			var curVisual = $(this);
			
			function init () {
				size = $(elem, curVisual).not(controllBox).size();
				//alert(size);
				if(size > 1) {
					setStyle();
					makeNav();
					setPos();
					$('#thumbBoxInner').fadeTo(800,1, function(){
						$(ajaxLoader).fadeTo(1000, 0,function(){
							$(this).hide();
						});
					});
					show();
				}			
			
			}
			
			function setStyle(){
					$(curVisual).find(elem).parent().css("position", "relative");
					$(curVisual).find(elem).not(controllBox).css("position", "absolute");
			}
			
			function show () {
				$(document).stopTime("transition");
				if(i == 0){
					if(typeof prevAct !== "undefined" && prevAct){
						$(curVisual).find(elem).not(controllBox).fadeOut(opt.transition);
					}else{
						$(curVisual).find(elem).not(controllBox).fadeOut(0);
					}
				}else{
					$(curVisual).find(elem).not(controllBox).fadeOut(opt.transition);
				}
				var show = $(curVisual).find(elem).get(i);
				$(show).fadeIn(opt.transition);
					
				
				if(opt.autoStart == true){
					$(document).stopTime("transition");
					$(document).everyTime(opt.stay, "transition", function(){
						clickNext();
					}, 1);
	
				}
				
			}
			
			function makeNav() {		
				
				var controllInnerStr = '<div id="controllInner"></div>';
				var controllInner = '#controllInner';
				
				var thumbBoxStr = '<div id="thumbBox"></div>';
				var thumbBox = '#thumbBox';
				
				var thumbBoxInnerStr = '<div id="thumbBoxInner"></div>';
				var thumbBoxInner = '#thumbBoxInner';
				
				var thumbs = '';
				var url;
				var thumbURL;
				
				for(t=0; t<size; t++){
					thumbURLParent = $(curVisual).find(elem).get(t);
					thumbURL = $(thumbURLParent).find('img').attr('src');
					VisualFileName = thumbURL.replace(/.*\//, '').replace(/\..{3,4}/,'');
					CutVisualFileName = thumbURL.substring(thumbURL.lastIndexOf('/') + 1);
					//VisualFilePath = thumbURL.replace(/[^\/]+\..{3,4}/,'');
					VisualFilePath = thumbURL.replace(CutVisualFileName,'');
					thumbExt = thumbURL.substring(thumbURL.lastIndexOf('.'));
					thumbFileName = VisualFileName + opt.prefix + thumbExt;
					thumbFilePath = VisualFilePath + thumbFileName;
					
					thumbs += '<a class="visual_s" href="javascript:vodi(0);"><img src="'+ thumbFilePath  +'" /></a>';
						
				}
				
				
	
				navStrPrev = '<a id="btnPrev" href="javascript:void(0);" rel="prev" id="prev"><img src="'+opt.btnPrev+'" width="'+opt.prevWidth+'" height="'+opt.prevHeight+'" alt="" /></a>';
				navStrNext = '<a id="btnNext" href="javascript:void(0);" rel="next" id="next"><img src="'+opt.btnNext+'" width="'+opt.nextWidth+'" height="'+opt.nextHeight+'" alt="" /></a>';
				
				ajaxLoaderStr = '<div id="visualSlide_ajaxLoader"><img src="'+ opt.loader +'" alt="" width="16" height="16" /></div>';
				ajaxLoader = '#visualSlide_ajaxLoader';
				
				
				$(controllBox).append(controllInnerStr);
				
				$(controllInner).append(navStrPrev);
				$(controllInner).append(thumbBoxStr);
				$(thumbBox).append(thumbBoxInnerStr);
				$(thumbBoxInner).append(thumbs);
				if(opt.direction == 'vertical'){
					$(".visual_s").css({display: 'block', marginBottom: opt.padding +'px'});
				}
				$(controllInner).append(navStrNext);
				
				$(controllInner).append(ajaxLoaderStr);
				
				if(opt.direction == 'vertical'){
					$(ajaxLoader).css({
						width:  opt.thumbWidth + 'px',
						height: (opt.thumbHeight + opt.padding) * opt.thumbShow + 'px',
						backgroundColor: '#fff',
						position: 'absolute',
						top: opt.prevHeight +'px',
						left: opt.width + 'px',
						textAlign: 'center'
					});
				}else{
					
					$(ajaxLoader).css({
						width:  (opt.thumbWidth + opt.padding) * opt.thumbShow + 'px',
						height: opt.thumbHeight + 'px',
						backgroundColor: '#fff',
						position: 'absolute',
						top: '0px',
						left: opt.prevWidth + opt.padding +'px',
						textAlign: 'center'
					});
				}
				
				$(ajaxLoader).find('img').css({
					marginTop: opt.thumbHeight / 2  - 8 + 'px'
				});
					
				if(opt.direction == 'vertical'){
					$(thumbBoxInner).css({
						width: opt.thumbWidth  + 'px',
						height: (opt.thumbHeight + opt.padding) * size + opt.thumbHeight + 'px',
						position: 'relative',
						top: '-' + opt.thumbHeight +'px'
					});
				}else{
					
					$(thumbBoxInner).css({
						width: (opt.thumbWidth + opt.padding) * size + opt.thumbWidth + 'px',
						position: 'relative',
						left: '-' + opt.thumbWidth +'px'
					});
				}
				$('a.visual_s:first', thumbBoxInner).before($('a.visual_s:last',thumbBoxInner)); 
				
				$(thumbBoxInner).fadeTo(0,0);
			}			
			
			init();
			
			$('a.visual_s', '#thumbBoxInner').live('click',function(){
				$('a.visual_s', '#thumbBoxInner').each(function(){
					$(this).fadeTo(0, 1);
				});
				var thumbURL = $(this).find('img').attr('src');
				var thumbFileName = thumbURL.replace(/.*\//, '').replace(/\..{3,4}/,'');
				var fileNum = thumbFileName.replace(/[^\d]*/, '').replace(/_.*/,'').replace(/0(\d+)/,'$1');
				fileNum = fileNum - 1;
				
				var thumbPos = $(this).index();
				if(thumbPos == 1){
					clickPrev();
				}else if(thumbPos == 3){
					clickNext();
				}
				
				
				
				//alert(thumbPos);
			});
			
			
			function showNext(){
					if(i + 1 < size) {
						i = i + 1;
					}else if(i + 1 == size) {
						i = 0;
					}
					
					show();
			}
			
			function showPrev(){
					if(i - 1 < 0) {
						i = size - 1;
					}else{
						i = i - 1;
					}
					
					show();
			}
			
			
			// Right click function
			$('#btnNext img').click(function(){
				clickNext();
        	});
			
			function clickNext(){
				$('a.visual_s', '#thumbBoxInner').each(function(){
					$(this).fadeTo(0, 1);
				});
				
				if(opt.direction == 'vertical'){
					var item_height = opt.thumbHeight + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('top')) - item_height;
					
					$('#thumbBoxInner:not(:animated)').animate({'top' : left_indent},opt.transition,function(){    
						
						$('#thumbBoxInner a.visual_s:last').after($('#thumbBoxInner a.visual_s:first')); 
						
						$('#thumbBoxInner').css({top:'-' + (opt.thumbHeight + opt.padding) +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
						showNext();
					}); 
				}else{
					
					var item_width = opt.thumbWidth + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('left')) - item_width;
					
					$('#thumbBoxInner:not(:animated)').animate({'left' : left_indent},opt.transition,function(){    
						
						$('#thumbBoxInner a.visual_s:last').after($('#thumbBoxInner a.visual_s:first')); 
						
						$('#thumbBoxInner').css({left: '-' + opt.thumbWidth +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
						showNext();
					}); 
				}
			}
			
			
			//Left click function
			$('#btnPrev img').click(function(){
            	clickPrev();		
        	});
			
			function clickPrev(){
				prevAct = 1;
				$('a.visual_s', '#thumbBoxInner').each(function(){
					$(this).fadeTo(0, 1);
				});
				
				if(opt.direction == 'vertical'){
					var item_height = opt.thumbHeight + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('top')) + item_height;
					
					$('#thumbBoxInner:not(:animated)').animate({'top' : left_indent},opt.transition ,function(){    
							
						$('#thumbBoxInner a.visual_s:first').before($('#thumbBoxInner a.visual_s:last')); 
						
						$('#thumbBoxInner').css({top: '-' + (opt.thumbHeight + opt.padding) +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
						showPrev();
					});
				}else{
					
					var item_width = opt.thumbWidth + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('left')) + item_width;
					
					$('#thumbBoxInner:not(:animated)').animate({'left' : left_indent},opt.transition ,function(){    
							
						$('#thumbBoxInner a.visual_s:first').before($('#thumbBoxInner a.visual_s:last')); 
						
						$('#thumbBoxInner').css({left: '-' + opt.thumbWidth +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
						showPrev();
					});
				}
			}
			
			// Execute 1st time only.
			function setPos(){
				$('a.visual_s', '#thumbBoxInner').each(function(){
					$(this).fadeTo(0, 1);
				});
				
				if(opt.direction == 'vertical'){
					var item_height = opt.thumbHeight + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('top')) + item_height;
					
					$('#thumbBoxInner:not(:animated)').animate({'top' : '-' + left_indent},opt.transition ,function(){    
							
						$('#thumbBoxInner a.visual_s:first').before($('#thumbBoxInner a.visual_s:last')); 
						
						$('#thumbBoxInner').css({top: '-' + (opt.thumbHeight + opt.padding) +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
					});
				}else{
					
					var item_width = opt.thumbWidth + opt.padding;
					
					var left_indent = parseInt($('#thumbBoxInner').css('left')) + item_width;
					
					$('#thumbBoxInner:not(:animated)').animate({'left' : left_indent},opt.transition ,function(){    
							
						$('#thumbBoxInner a.visual_s:first').before($('#thumbBoxInner a.visual_s:last')); 
						
						$('#thumbBoxInner').css({left: '-' + opt.thumbWidth +'px'});
						
						$('a.visual_s', '#thumbBoxInner').eq(2).fadeTo(500, 0.6);
					});
				}
			}
			
			
		});
				
	};
	
    $.fn.visualSlider.defaults = {
        width: 710,
		height: 282,
		padding: 0,
		thumbShow: 3,
		prefix: '_s',
		thumbWidth: 220,
		thumbHeight: 77,
		btnPrev: '/js/visualSlide/images/btnUp.gif',
		prevWidth: 224,
		prevHeight: 22,
		btnNext: '/js/visualSlide/images/btnDown.gif',
		nextWidth: 224,
		nextHeight: 22,
		controllID: 'controll',
		stay: 5000,
		transition: 1000,
		autoStart: true,
		loader: '/js/visualSlide/images/ajax-loader.gif',
		direction: 'vertical'
    };

})(jQuery);