/**
 * Awesom Gallery Plugin
 *
 * Created by Glenn Mason (http://www.glenntube.com)
 *
 */

(function($){  
	$.fn.awesomgallery = function(options){  
      
		var defaults = {  
			animate: true,
			timer: 4000,
			animationType: 'fade',
			animationSpeed: 300,
			thumbX: 140,
			thumbY: 87,
			autoplay: true
		};  
	    
		var options = $.extend(defaults, options);  
		  
		return this.each(function(){  
			obj = $(this);  
			var body = obj.html();  
			
			obj.addClass('awesomgallery'); // give it a class for styling
			
			var allTheImgs = obj.html();
			// Firstly, create new divs which we'll use for buttons and other fun things
			obj.html('<div class="run_button"></div><div class="hide_button"></div><div class="stop_button"></div><div class="play_button"></div>'+
			'<div class="img_holder">'+allTheImgs+'</div>'+
			'<div class="slide_indicator">'+
				'<div class="current_slide"></div><div class="total_slides"></div>'+
			'</div>'+
			'<div class="thumbnail_button"></div>'+
			'<div class="left_side"><div class="arrow"></div></div>'+
			'<div class="right_side"><div class="arrow"></div></div>'+
			'<div class="progress_holder"><div class="slideshow_progress"></div></div>'+
			'<div class="thumb_panel"><div class="thumbs_hold"></div></div>'+
			'');
			//dynamically set the size for the left and right side of the gallery
			var leftSide = $('.left_side', obj);
			var rightSide = $('.right_side', obj);
			var leftArrow = $('.left_side .arrow', obj);
			var rightArrow = $('.right_side .arrow', obj);
			var currentSlide = $('.slide_indicator .current_slide', obj);
			var totalSlides = $('.slide_indicator .total_slides', obj);
			var imgHolder = $('.img_holder', obj);
			var thumbPanel = $('.thumb_panel', obj);
			var thumbBtn = $('.thumbnail_button', obj);
			var thumbsHold = $('.thumbs_hold', obj);
			
			var stopBtn = $('.stop_button', obj);
			var playBtn = $('.play_button', obj);
			var hideBtn = $('.hide_button', obj);
			var runBtn = $('.run_button', obj);
			
			var cont_halfWidth = parseInt(obj.css('width')) / 2;
			var cont_width = obj.css('width');
			var cont_height = obj.css('height');
			
			
			leftSide.css({
				width: cont_halfWidth+'px',
				height: cont_height
			});
			rightSide.css({
				width: cont_halfWidth+'px',
				height: cont_height
			});
			
			imgHolder.css({
				width: cont_width,
				height: cont_height
			});
			
			thumbPanel.css({
				width: cont_width,
				height: cont_height
			});
			
			
			/* ------- EVENTS ------- */
			
			obj.hover(function(){
				leftArrow.stop(true,true).animate({
					left: '30px',
					opacity: 1
				}, 300);
				rightArrow.stop(true,true).animate({
					right: '30px',
					opacity: 1
				}, 300);
			}, function(){
				leftArrow.delay(1000).animate({
					left: '-17px',
					opacity: 0
				}, 300);
				rightArrow.delay(1000).animate({
					right: '-17px',
					opacity: 0
				}, 300);
			});
			
			leftSide.click(function(){
				changeSlide('prev');
			});
			rightSide.click(function(){
				changeSlide('next');
			});
			
			thumbBtn.click(function(){
				if(thumbPanel.is(':visible')){
					thumbPanel.fadeOut(options.animationSpeed);
					runAgain();
				}else{
					thumbPanel.fadeIn(options.animationSpeed);
					stopProgress();
				}
			});
			
			
			
			
			
			/* ----- END EVENTS ----- */
			
			
			// Now give each image it's own class for reference, and create an array of images and their thumbnail if it has one:
			var imgarray = Array();
			var imgs = $('li', obj);
			var imgcount = 0;
			imgs.each(function(){
				$(this).addClass('galimg_'+imgcount);
				$(this).attr('slide', imgcount);
				if(imgcount > 0){
					$(this).css('display', 'none');
				}else{
					$(this).addClass('active');
				}
				
				var thisimg = {};
				
				if($(this).has('img')){
					thisimg.mainimg = $(this).children('img').attr('src');
					thisimg.thumb = $(this).children('img').attr('thumb');
				}
				
				imgarray.push(thisimg);
				
				imgcount++;
			});
			
			
			// Make the thumbnails
			var thumbString = '';
			
			for(i=0;i<imgarray.length;i++){
				if(imgarray[i].thumb != ''){
					//process thumbnail supplied
					thumbString += '<img src="'+imgarray[i].thumb+'" style="width: '+options.thumbX+'px; height: '+options.thumbY+'px;" slide="'+i+'" />';
				}else if(imgarray[i].src != ''){
					//create thumbnail
					thumbString += '<img src="'+imgarray[i].src+'" style="width: '+options.thumbX+'px; height: '+options.thumbY+'px;" slide="'+i+'" />';
				}else if(imgarray[i].video != ''){
					
					//create video
					//thumbString += '<img src="'+imgarray[i].src+'" style="width: '+options.thumbX+'px; height: '+options.thumbY+'px;" slide="'+i+'" />';
				}
			}
			
			//position the thumbs holder
			var howmanyrows = Math.round((imgarray.length / 5) + 0.5);
			var thumbsHoldHeight = (howmanyrows * 74) + 20;
			thumbsHold.css('margin-top', '-'+(thumbsHoldHeight / 2)+'px');
			thumbsHold.html(thumbString);
			
			// detect a click of thumbnail
			var thumbsHoldImg = $('.thumbs_hold img', obj);
			
			thumbsHoldImg.click(function(){
				var slide = $(this).attr('slide');
				thumbBtn.click();
				changeSlide(slide);
			});
			
			// The autoplay animation
			var allowAuto = 0;
			var progressBar = $('.slideshow_progress', obj);
			var progressHolder = $('.progress_holder', obj);
			if(options.autoplay == true){
				if($('iframe').length > 0){
					allowAuto = 0;
				}else{
					allowAuto = 1;
					runAgain();
				}
			}
			
			function runAgain(){
				if(allowAuto == 1){
					progressHolder.css({'display': 'block'});
					progressBar.css({width: '0px'});
					progressBar.animate({width: '960px'}, options.timer, function(){
						playNext();
					});
				}
			}
			function playNext(){
				changeSlide('next');
				runAgain();
			}
			function stopProgress(){
				progressBar.stop();
			}
			function hideProgress(){
				progressBar.stop();
				progressHolder.css({'display': 'none'});
			}
			
			stopBtn.click(function(){
				stopProgress();
			});
			playBtn.click(function(){
				allowAuto = 1;
				runAgain();
			});
			hideBtn.click(function(){
				hideProgress();
			});
			runBtn.click(function(){
				allowAuto = 1;
				playNext();
			});
			
			rightSide.hover(function(){
				stopProgress();
			}, function(){
				runAgain();
			});
			leftSide.hover(function(){
				stopProgress();
			}, function(){
				runAgain();
			});
			
			// Functions
			var newSlide = 0;
			
			function isInt(x) {
				var y=parseInt(x);
				if (isNaN(y)) return false;
				return x==y && x.toString()==y.toString();
			} 
			
			function changeSlide(method){
				
				var visibleSlide = $('.img_holder li.active').attr('slide');
				if(isInt(method)){ // if the function input is an integer 
					newSlide = parseInt(method);
				}else{ // if the function input is not an integer
					if(method == 'next'){
						if(visibleSlide < (imgcount - 1)){
							newSlide = parseInt(visibleSlide) + 1;
						}else{
							newSlide = 0;
						}
					}else if(method == 'prev'){
						if(visibleSlide > 0){
							newSlide = parseInt(visibleSlide) - 1;
						}else{
							newSlide = parseInt((imgcount - 1));
						}
					}
				}
				
				//newSlide = parseInt(newSlide);
				
				//alert('new slide: '+newSlide+'\nvisible slide: '+visibleSlide);
				
				if(options.animationType == 'fade'){ // if animation type is 'fade'
					$('.img_holder li').removeClass('active');
					$('.img_holder li').stop(true,true).fadeOut(options.animationSpeed);
					$('.galimg_'+newSlide).stop(true,true).fadeIn(options.animationSpeed);
					$('.galimg_'+newSlide).addClass('active');
				}else if(options.animationType == 'shrink'){ // if animation type is 'shrink'
					$('.img_holder li').removeClass('active');
					$('.img_holder li').stop(true,true).slideUp(options.animationSpeed);
					$('.galimg_'+newSlide).stop(true,true).slideDown(options.animationSpeed);
					$('.galimg_'+newSlide).addClass('active');
				}else if(options.animationType == 'slide'){ // if animation type is 'slide'
					if(method == 'next'){
						$('.img_holder li').removeClass('active');
						$('.galimg_'+newSlide).css({left: cont_width, display: 'block'});
						$('.galimg_'+newSlide).animate({left: '0px'}, options.animationSpeed);
						$('.galimg_'+visibleSlide).animate({left: '-'+cont_width}, options.animationSpeed);
						$('.galimg_'+newSlide).addClass('active');
					}else if(method == 'prev'){
						$('.img_holder li').removeClass('active');
						$('.galimg_'+newSlide).css({left: '-'+cont_width, display: 'block'});
						$('.galimg_'+newSlide).animate({left: '0px'}, options.animationSpeed);
						$('.galimg_'+visibleSlide).animate({left: cont_width}, options.animationSpeed);
						$('.galimg_'+newSlide).addClass('active');
					}else if(isInt(method)){ 
						$('.img_holder li').removeClass('active');
						$('.galimg_'+newSlide).css({left: cont_width, display: 'block'});
						$('.galimg_'+newSlide).animate({left: '0px'}, options.animationSpeed);
						$('.galimg_'+visibleSlide).animate({left: '-'+cont_width}, options.animationSpeed);
						$('.galimg_'+newSlide).addClass('active');
					}
				}else{
					alert('else fired');
				}
				currentSlide.html(newSlide + 1);
			}
			
			// Sort out the slide numbers:
			totalSlides.html(imgcount);
			currentSlide.html('1');
			
			// If the image has a thumbnail then use it, if not generate one on the fly:
			 
		});  
	};  
})(jQuery);