/***** USAGE *****
--- HTML code ---
<ul id="unique_id">          
	<li>
    	<img />
        <div class="description">
        	HTML code for description
        </div>
    </li>
	<li>
    	<img />
        <div class="description">
        	<p>description</p>
        </div>
    </li>
</ul>

--- Javascript code ---
$('#unique_id').autoGallery({options});

(OPTIONS):
duration: duration of staying the position (int, ms)
iconSettings: icons at top left appearance settings (object) or false to disappear (boolean)
	{
		size: (int, px)
		borderWidth: (int, px)
		borderColor: (string)
		backgroundColor: (string)
		margin: (int, px)
	}
descSettings: description box appearance settings (object)
	{
		headHeight: (int, px), 
		fontColor: (string), 
		fontSize: (int, px), 
		backgroundColor: (string), 
		text: (string)
	}
scrollSpeed: items scroll speed (int, ms)
descBoxSpeed: moving speed for description box (int, ms)

************/

(function($) {
	$.fn.autoGallery = function(userArgs) {
		if(!this.length) return false;
		if(!this.is('ul')) return false;
		
		var args = {
			duration:5000,
			iconSettings:{size:5,borderWidth:1,borderColor:'#666',backgroundColor:'#252525',margin:4,cornerRadius:2},
			descSettings:{headHeight:20,fontColor:'#fff',fontSize:12,backgroundColor:'#000',alpha:0.85,text:'Details'},
			scrollSpeed:500,
			descBoxSpeed:300
		}
		
		$.extend(true, args, userArgs);
		
		var frame = this.css({'position':'relative','overflow':'hidden','padding':0});
		var timer;
		var current = 0;
		var total = frame.find('li').length;
		
		$(window).load( function() {
			
			var itemsUL = $('<ul></ul>').attr('id','auto_gallery_item_ul').css({'padding':0,'margin':0,'list-style':'none'});
			var items = $('<li></li>').append(itemsUL);
			var itemsIcons = $('<div></div>').attr('id','items_icons').css({'position':'absolute','top':args.iconSettings.margin+'px','left':args.iconSettings.margin+'px'});
			
			frame.find('li').each( function(index) {
				var leftPosi = index*frame.width();
				$(this).css({'position':'absolute','top':0,'left':leftPosi,'width':frame.width()+'px','height':frame.height()+'px'}).find('.description').css({'position':'absolute','top':frame.height()-args.descSettings.headHeight+'px','left':0,'width':frame.width()+'px','height':frame.height()+'px','color':args.descSettings.fontColor,'background-color':args.descSettings.backgroundColor,'opacity':args.descSettings.alpha, 'cursor':'pointer'});
				var desc = $('<div></div>').attr('id','desc_inner').css({'padding':'10px'}).append($(this).find('.description').html());
				var descHead = $('<table></table>').css({'width':'100%','height':args.descSettings.headHeight+'px','text-align':'center','font-size':args.descSettings.fontSize+'px'}).append('<tr><td></td></tr>');
				descHead.find('td').css({'width':'100%','height':'100%','vertical-align':'middle'}).text(args.descSettings.text);
				$(this).find('.description').empty().append(descHead).append(desc).hover(function(e) {
					$(this).stop(false,false).animate({'top':0}, args.descBoxSpeed);
				}, function(e) {
					$(this).stop(true,true).animate({'top':frame.height()-args.descSettings.headHeight+'px'}, args.descBoxSpeed);
				});
				itemsUL.append($(this));	
				
				if(args.iconSettings) {
					var icon = $('<span></span>').attr('id','auto_gallery_item_'+index).css({'display':'block','width':args.iconSettings.size+'px','height':args.iconSettings.size+'px','float':'left','margin-right':args.iconSettings.margin+'px','margin-bottom':args.iconSettings.margin+'px','border':args.iconSettings.borderWidth+'px solid '+args.iconSettings.borderColor,'background-color':args.iconSettings.backgroundColor,'cursor':'pointer', 'border-radius':args.iconSettings.cornerRadius+'px', '-moz-border-radius':args.iconSettings.cornerRadius+'px', '-webkit-border-radius':args.iconSettings.cornerRadius+'px', '-o-border-radius':args.iconSettings.cornerRadius+'px'}).click( function() {
						var id = $(this).attr('id').substr(18);
						current = id;
						scrolling();
					});
					itemsIcons.append(icon);	
				}
				
				leftPosi = null; desc = null; descHead = null; icon = null; id = null;	
			});
			
			frame.append(items);
			frame.append(itemsIcons);
			
			timer = setInterval(function() {
				current++;
				if(current >= total) current = 0;
				scrolling();
			}, args.duration);
			
			frame.hover( function() {
				clearInterval(timer);
			},function() {
				timer = setInterval(function() {
					current++;
					if(current >= total) current = 0;
					scrolling();
				},args.duration);
			});
			
			itemsUL = null; items = null; itemsIcons = null;
		});
		
		function scrolling() {
			
			var moveLen = frame.find('#auto_gallery_item_ul').find('li').eq(current).position().left;	
			
			frame.find('#auto_gallery_item_ul').find('li').each( function(index) {
				var newPosi = $(this).position().left - moveLen;
				if(newPosi < frame.width()*-1) {
					newPosi = newPosi+frame.width()*total;
					$(this).css({'left':newPosi+'px'});	
				}else{
					$(this).stop(true,true).animate({'left':newPosi+'px'}, args.scrollSpeed);
				}
				newPosi = null;
			});
			moveLen = null;
			return false;
		}
		return this;
	}
})(jQuery);