/***** USAGE *****
--- HTML code ---
<ul id="unique-id">
	<li>
		<a href="path/to/larget/image" target="_blank">
			<img src="path/to/small/image" width="" height="" alt=""/>
		</a>
	</li>
	<li><a .........</li>
	<li><a ......</li>
	.......
</ul>

--- JAVASCRIPT code ---
$('#unique-id').scrollGallery(speed, sideSettings);
Parameters:
speed: int: speed of scrolling images
sideSettings: Array: Side bar style settings
	new Array(width of bar(int, px), color of bar(string, #), opacity of bar(Number, 0~1))

--- Additional CSS to add Arrow ---
<link href="path/to/scrollGallery.css"/>
Move to files to the folder:
scrollGallery.css, arrows_left.png, arrows_right.png, arrows_left.gif, arrows_right.gif

*****************/
(function($) {
	$.fn.scrollGallery = function(speed, sideSettings) {
		if(!speed) var speed = 4;
		if(!sideSettings || !jQuery.isArray(sideSettings)) var sideSettings = new Array(30, '#000', 0.7);
		
		var frame = this.css({'position':'relative','overflow':'hidden','list-style':'none','padding':0});
		frame.find('a').click( function() {
			$(this).css('outline','none');
			return false;
		});
		var total = frame.find('li').length;
		var totalWidth;
		var gallery;
		var leftBtn;
		var rightBtn;
		var muki;
		var timer;
		var scrolling = false;
		var accel = 1;
		
		$(window).load( function() {
			var liWidth = frame.find('li').eq(0).outerWidth(true);
			var liHeight = frame.find('li').eq(0).outerHeight(true);
			totalWidth = Math.ceil(total/(Math.floor(frame.height()/liHeight)))*liWidth;
		
			var ul = $('<ul></ul>').css({'position':'absolute','height':frame.height()+'px','list-style':'none','margin':0,'padding':0, 'width':totalWidth+'px'});
			frame.find('li').each( function() {
				ul.append($(this));
				$(this).find('a').click( function() {
					createContent($(this).attr('href'));
				});
			});
			gallery = $('<li></li>').css({'position':'relative','width':frame.width()+'px','height':frame.height()+'px'}).append(ul);
			leftBtn = $('<li></li>').attr('id','scroll_gallery_left_btn').css({'position':'absolute','top':0,'left':0,'width':sideSettings[0]+'px','height':frame.height()+'px','background-color':sideSettings[1],'opacity':sideSettings[2],'background-position':'0 '+(frame.height()*0.5-50)+'px'});
			rightBtn = $('<li></li>').attr('id','scroll_gallery_right_btn').css({'position':'absolute','top':0,'left':(frame.width()-sideSettings[0])+'px','width':sideSettings[0]+'px','height':frame.height()+'px','opacity':sideSettings[2],'background-color':sideSettings[1],'background-position':sideSettings[0]-20+'px '+(frame.height()*0.5-50)+'px'});
			frame.append(gallery).append(leftBtn).append(rightBtn);
			
			leftBtn.hover( function(e) {
				muki = 1;
				timer = setInterval( function() {
					galleryScroll();
				}, 40);
			},function(e) {
				muki = 0;
				clearInterval(timer);
			});
			leftBtn.mousemove( function(e) {
				accel = Math.abs((sideSettings[0]-(e.pageX-frame.offset().left))*0.1);
			});
			
			rightBtn.hover( function(e) {
				muki = -1;
				timer = setInterval( function() {
					galleryScroll();
				}, 40);
			},function(e) {
				muki = 0;
				clearInterval(timer);
			});
			rightBtn.mousemove( function(e) {
				accel = Math.abs((e.pageX-$(this).offset().left)*0.1);
			});
			
			//FOR MOBILE DEVICE
			leftBtn.bind('touchstart', function(e) {
				galleryMove(1);
				//clearInterval(timer);
				e.stopPropagation();
				e.preventDefault();
			});
			
			rightBtn.bind('touchstart', function(e) {
				galleryMove(-1);
				//clearInterval(timer);
				e.stopPropagation();
				e.preventDefault();
			});
			
		});
		
		var createContent = function(src) {
			var ww = $(window).width();
			var wh = $(window).height();
			var table = $('<table></table>').attr({'width':ww+'px','height':wh+'px','cellspacing':0,'cellpadding':0}).css({'text-align':'center'});
			$('<img/>').attr('src',src).appendTo($('<td></td>')).parent().css({'width':ww+'px','height':wh+'px', 'vertical-align':'middle'}).appendTo($('<tr></tr>')).parent().appendTo(table);
			blackBox(table, ww, wh);
		}
		
		var galleryScroll = function() {
			var leftPosi = gallery.position().left+Math.round(speed*muki*accel);
			if(leftPosi > 0) leftPosi = 0;
			else if(leftPosi < -totalWidth+frame.width()) leftPosi = -totalWidth+frame.width();
			gallery.css({'left':leftPosi+'px'});
		}
		
		var galleryMove = function(direct) {
			var leftPosi = gallery.position().left+Math.round(speed*direct*20);
			if(leftPosi > 0) leftPosi = 0;
			else if(leftPosi < -totalWidth+frame.width()) leftPosi = -totalWidth+frame.width();
			gallery.css({'left':leftPosi+'px'});
		}
		
		var blackBox = function(jQueryContent, width, height) {
		
			var ww = $(window).width();
			var wh = $(window).height();
			var scrollTop = $(window).scrollTop();
			var topPosi = (wh-height)*0.5;
			var leftPosi = (ww-width)*0.5;
			var bodyH = $('body').height();
			if(bodyH == 0) bodyH = 10000;
			
			var blackbox = $('<div></div>').attr('id','black_box_back_pane').css({'position':'absolute','top':0,'left':0,'width':ww+'px','height':bodyH+'px','background-color':'#000','opacity':0.85});
			var contentbox = $('<div></div>').attr('id','black_box_content_pane').css({'position':'absolute','width':width+'px','height':height+'px','top':topPosi+scrollTop+'px','left':leftPosi+'px','overflow':'hidden'});
			var closebtn = $('<div>X</div>').css({'padding':'5px 10px','font-size':'25px','font-weight':'bold','font-family':'Arial, sans-serif','color':'#fff','cursor':'pointer'});	
			var closebox = $('<div></div>').attr('id','video_popup_close_box').css({'position':'absolute','top':scrollTop+10+'px','left':'10px','border':'2px solid #fff','border-radius':'5px','-moz-border-radius':'5px','-webkit-border-radius':'5px','-o-border-radius':'5px','background-color':'#000'}).append(closebtn);
			
			if(jQuery().mousewheel) {
				blackbox.bind('mousewheel', function(evt, dlt) {
					evt.stopPropagation();
					evt.preventDefault();
					return false;
				});
				contentbox.bind('mousewheel', function(evt, dlt) {
					evt.stopPropagation();
					evt.preventDefault();
					return false;
				});
				closebox.bind('mousewheel', function(evt, dlt) {
					evt.stopPropagation();
					evt.preventDefault();
					return false;
				});
			}
			
			contentbox.append(jQueryContent);
			$('body').append(blackbox).append(contentbox).append(closebox);	
			
			closebox.bind('click', function(e) {
				if(jQuery().mousewheel) {
					blackbox.unbind('mousewheel');
					contentbox.unbind('mousewheel');
					closebox.unbind('mousewheel');
				}
				closebox.unbind('click');
						
				closebox.remove();
				contentbox.remove();
				blackbox.remove();
							
				content = null;
				blackbox = null;
				contentbox = null;
				closebtn = null;
				closebox = null;
				
				e.stopPropagation();
				e.preventDefault();
			});
			
			$(window).resize( function() {
				ww = $(this).width();
				wh = $(this).height();
				
				if(document.getElementById('black_box_back_pane')) {
					$('#black_box_back_pane').css({'width':ww+'px'})
				}
				
				if(document.getElementById('black_box_content_pane')) {
					contentbox = $('#black_box_content_pane');
					topPosi = (wh-contentbox.height())*0.5;
					leftPosi = (ww-contentbox.width())*0.5;
					topPosi += $(window).scrollTop();
					
					contentbox.css({'top':topPosi+'px','left':leftPosi+'px'});
				}
			});
		}

		return this;
	}
})(jQuery);