/***** USAGE *****
HTML CODE
<div id="unique-id">
	<ul>
		<li><img/></li>
		<li><img/></li>
	</ul>
</div>

JAVASCRIPT CODE
$('#unique-id').listViewer({options});

---options---
controller: (object) ... Arrow icon setting / use image or css
	right: 'path/to/image' (string) ... Arrow image for right or bottom position
	left: 'path/to/image' (string) ... Arrow image for left or top position
	height: (px/int) ... Height of CSS arrow. If you don't have a image, CSS arrow will appear.
	color: 'color code' (string) ... Color of CSS arrow when no image
controllerIE6: (object) ... Alternative image for IE6. Same as contoller.
horizontal: (boolean) ... List direction
show: (int) ... Number of items you want to show without scroll.
speed: (ms/int) ... Speed of scroll
easing: (string) ... Easing effect for scroll
alpha: 0 - 1 (number) ... Transparency of arrows
auto: (boolean) ... Active auto rotation
duration: (ms/int) ... Speed of auto rotation
loadComplete: (function(ImageMargin)) ... Function called after viewer created
listClick: (function(index, target)) ... Function triggered after clicking image

***Note:
Please use image as controller for IE6

****************/
(function($) {
	$.fn.imageListViewer = function(userArgs) {
		if(!this.length) return false;
		
		var args = {
			controller:{height:15,color:'#B3CBE5'},
			controllerIE6:false,
			listClick:function(){},
			horizontal:true,
			show:4,
			speed:600,
			easing:'',
			alpha:0.4,
			auto:false,
			duration:3000,
			loadComplete:function(){}
		};
		$.extend(true,args,userArgs);
		
		if(!window.XMLHttpRequest) {
			if(args.controllerIE6) args.controller = args.controllerIE6;
		}
		
		var frame = this;
		var frameid = frame.attr('id');
		if(args.controller.width) var arrowW= args.controller.width;
		else {
			if(args.horizontal) arrowW = frame.height()*0.5;
			else arrowW = frame.width()*0.5;
		}
		
		var autoTimer = null;
		var timerRun = false;
		
		//RIGHT or BOTTOM CONTROLLER
		if(args.controller.right) var rightCtl = $('<img>').addClass('list_viewer_right_controller').css({'cursor':'pointer'}).attr('src',args.controller.right);
		else rightCtl =  $('<div></div>').addClass('list_viewer_right_controller').css({'width':0,'height':0,'border-color':'transparent transparent transparent '+args.controller.color,'border-style':'solid','border-width':arrowW+'px 0 '+arrowW+'px '+args.controller.height+'px','cursor':'pointer'});
		if(args.horizontal) rightCtl.css({'float':'left'});
		else rightCtl.css({'border-color':args.controller.color+' transparent transparent transparent','border-width':args.controller.height+'px '+arrowW+'px 0 '+arrowW+'px','clear':'both'});
		
		//LEFT or TOP CONTROLLER
		if(args.controller.left) var leftCtl = $('<img>').addClass('list_viewer_left_controller').css({'cursor':'pointer','opacity':args.alpha}).attr('src',args.controller.left);
		else leftCtl = $('<div></div>').addClass('list_viewer_left_controller').css({'width':0,'height':0,'border-color':'transparent '+args.controller.color+' transparent transparent','border-style':'solid','border-width':arrowW+'px '+args.controller.height+'px '+arrowW+'px 0','opacity':args.alpha,'cursor':'pointer'});
		if(args.horizontal) leftCtl.css({'float':'left'});
		else leftCtl.css({'border-color':'transparent transparent '+args.controller.color+' transparent','border-width':'0 '+arrowW+'px '+args.controller.height+'px '+arrowW+'px'});
		
		var naviUl = this.find('ul');
		if(!naviUl.length) naviUl = this.find('ol');
		var naviLi = naviUl.find('li');
		var total = naviLi.length;
		var maxIndex = total-args.show;
		var liSize;
		var naviDiv = $('<div></div>').append(naviUl).appendTo(this);
		naviDiv.before(leftCtl).after(rightCtl);
		var current = 0;
		
		$(window).load( function() {
			if(args.horizontal) {
				 var divSize = frame.width()-rightCtl.outerWidth()-leftCtl.outerWidth();
				 naviDiv.css({'position':'relative','width':divSize+'px','overflow':'hidden','float':'left','height':'100%','margin':0,'padding':0});
				 var sizeLi = naviLi.find('img').eq(0).outerWidth();
			}else{
				 divSize = frame.height()-rightCtl.outerHeight()-leftCtl.outerHeight();
				 naviDiv.css({'position':'relative','height':divSize+'px','overflow':'hidden','float':'left','width':'100%','margin':0,'padding':0});
				 sizeLi = naviLi.eq(0).outerHeight();
			}
			
			liSize = Math.ceil(divSize/args.show);
			var adjustGap = Math.ceil((liSize-sizeLi)*0.5);
			if(!window.XMLHttpRequest) adjustGap *= 0.5;
			
			naviUl.css({'position':'absolute','left':0,'top':0,'overflow':'visible','padding':0,'margin':0,'list-style':'none'});
			if(args.horizontal) naviUl.css({'width':liSize*total+'px'});
			
			naviLi.each( function(index) {
				$(this).css({'margin':0,'padding':0}).find('img').click( function(e) {
					e.preventDefault();
					args.listClick(index, $(this));
					return false;
				});
				if(args.horizontal) $(this).css({'width':liSize+'px','height':'100%'}).find('img').css({'margin':'0 '+adjustGap+'px'});
				else $(this).css({'width':'100%','height':liSize+'px'}).find('img').css({'margin-top':adjustGap+'px'});
			});
			
			if(total > args.show) {
				leftCtl.click( function(e) {
					e.preventDefault();
					goMove(-1*args.show);
					return false;
				});
				rightCtl.click( function(e) {
					e.preventDefault();
					goMove(args.show);
					return false;
				});
				if(window.addEventListener) {
					document.getElementById(frameid).getElementsByClassName('list_viewer_left_controller')[0].addEventListener('touchstart', function(e) {
						e.preventDefault();
						goMove(-1*args.show);
						return false;
					}, false);
					document.getElementById(frameid).getElementsByClassName('list_viewer_right_controller')[0].addEventListener('touchstart', function(e) {
						e.preventDefault();
						goMove(args.show);
						return false;
					}, false);
				}
				if(args.auto) {
					frame.setTimer();
					frame.hover( function(e) {
						frame.stopTimer();
					}, function(e) {
						frame.setTimer();
					});
				}
			}else{
				rightCtl.css('visibility','hidden');
				leftCtl.css('visibility','hidden');	
			}
			
			args.loadComplete(adjustGap);
			
			divSize = null, sizeLi = null, adjustGap = null;
			return false;
		});
		
		function goMove(direction, auto) {
			current += direction;
			if(auto) {
				if(current > maxIndex) current = 0;
			}else{
				if(current < 0) current = 0;
				//if(current > maxIndex+args.show-1) current -= direction;
				if(current > maxIndex) current = maxIndex;
			}
			if(args.horizontal)
				naviUl.stop(true,true).animate({'left':current*liSize*-1+'px'}, args.speed, args.easing);
			else
				naviUl.stop(true,true).animate({'top':current*liSize*-1+'px'}, args.speed, args.easing);
						
			rightCtl.css('opacity',1);
			leftCtl.css('opacity',1);
			if(current >= maxIndex) rightCtl.css('opacity',args.alpha);
			if(current == 0) leftCtl.css('opacity',args.alpha);
			
			return false;
		}
		
		this.setTimer = function() {
			if(total > args.show) {
				if(!timerRun) {
					timerRun = false;
					autoTimer = window.setInterval(function() {
						goMove(1, true);
					}, args.duration);
				}
			}
		};
		
		this.stopTimer = function() {
			if(total > args.show) {
				timerRun = false;
				window.clearInterval(autoTimer);
			}
		};
	}
})(jQuery);