// JavaScript Document

(function($){
  $.fn.rotator = function(options){
   
	var defaults = {
	  directory : 'images/',
	  speed: 8000,
	  controls : 'true',
	  controlHeight: '55px'
	},
	settings = $.extend({}, defaults, options);
	
	function changePic(images,current,dir){ // Changes the viewer image and resets the rotation timer
	  $('#viewerImg').fadeOut(500,function(){
		rotateTimer();
		$(this).attr('src',dir+images[current]).fadeIn();
	  });
	}
	function rotateTimer(){  // Sets the image rotation countdown
	  $('#arrowRight').stop();
	  $('#arrowRight').animate({ opacity: 1.0 },settings.speed,function(){
		$(this).click();
	  });
	}
	this.each(function(){
	  var $this = $(this);
	  var directory = settings.directory;
	  $.get('includes/_getHomePgImgs.php',
		{ dir : directory },
		function(data){
		  var images = Array();
		  for(x = 0; x < data.length; x++){
			images.push(data[x]);
		  }
			images.reverse();
		  
		  // Creates image viewer and popup controls
		  $this.css({ 'position':'relative', 'overflow':'hidden' });
		  /*$('<img>', { src:directory+images[0], id: 'viewerImg' }).appendTo($this);			
		  $('<div>', { id: 'viewerControls',
					   css: {
						'height': settings.controlHeight,
						 'width' :'100%',
						 'position' : 'absolute',
						 'bottom' : '-'+settings.controlHeight,
						 'cursor' : 'pointer',
						 'background-color' : '#000',
						 'opacity' : '0.6'					 
					   }
		  }).appendTo($this);
		  $('<img>', { id:'arrowRight' }).appendTo('#viewerControls');
		  $('<img>', { id:'arrowLeft' }).appendTo('#viewerControls');
		  */		  
		  $('<img>').attr({ src:directory+images[0], id: 'viewerImg' }).appendTo($this);			
		  $('<div>').attr({ id: 'viewerControls'}).css({
						'height': settings.controlHeight,
						 'width' :'100%',
						 'position' : 'absolute',
						 'bottom' : '-'+settings.controlHeight,
						 'cursor' : 'pointer',
						 'background-color' : '#000',
						 'opacity' : '0.6'					 
					   })
		  .appendTo($this);
		  $('<img>').attr({ id:'arrowRight' }).appendTo('#viewerControls');
		  $('<img>').attr({ id:'arrowLeft' }).appendTo('#viewerControls');
		  $this.hover(function(){
			$('#viewerControls').stop();
			$('#viewerControls').animate({
			  'bottom':'0px'						
			}); 
		  }, function(){
			$('#viewerControls').stop();
			$('#viewerControls').animate({
			  'bottom': '-'+settings.controlHeight						
			});  
		  });
		  
		  
		  // Preloads images and attaches 'click' events to the 'next' and 'previous' arrows in the popup controls
		  var current = 0;
		  var length = images.length;
		  $('<img>').attr('src',directory+images[current+1]);
		  $('<img>').attr('src',directory+images[length-1]);
		  $('#arrowRight').unbind().click(function(){
			current = (current+1 < length) ? current+1:0;
			changePic(images,current,directory);
			$('<img>').attr('src',directory+images[current+1]);
		  });
		  $('#arrowLeft').unbind().click(function(){
			current = (current-1 >= 0) ? current-1:length-1;
			changePic(images,current,directory);
			$('<img>').attr('src',directory+images[current-1]);
		  });
		  
		  if(settings.controls != 'true'){
			$('#viewerControls').css('display','none');  
		  }
		  
		  // Starts the image switch timer after the viewer is loaded
		  rotateTimer();
		},
	  'json');
							 
	  });
	  return this; 
    }		 
})(jQuery);