/**************GLOBALS*******************/

//var imageCount 		= 1;
var imageCount 		= 1;
var playReelEnabled = true; 
var timer 			= 3000;
var startCursor 	= 1;
var oldCursor		= 0;
var cursor			= startCursor;

var tInterval;

var cssOut;
var cssOver;
var cssSelected;

function initGallery() {
	// $(".gallery").css("visibility", "visible");
	$(".gallery").css("display", "block");
	
	$(".gallery > *").hide();
	imageCount = $(".gallery > *").size();
	if(imageCount!=1){
		createControls(pageType);
		showPicture();
	} else {
		$(".gallery > *").show();
	}

}

function createControls(pageType){
	colors = {
			'home' 				: "#ffc104", 
			'portfolio' 		: "#ffea00",
			'about-ecospace'	: "#dbfd00",
			'news-press'		: "#a9fd00",
			'faq' 				: "#00FF00",
			'contact-us' 		: "#55e937"
			};

	selectedColor = colors[pageType];
	var defaultBgColor = "#4a4834";
	cssOut = {
        'background-color' 	: defaultBgColor,
		'margin'			: '1px 0 0 1px',
		'padding' 			: "4px 8px 5px 8px",
		'color' 			: "#ffffff"
 	};
	cssOver = {
		'background-color'	: colors[pageType],
        'color'				: defaultBgColor
 	};
	cssSelected ={
        'background-color' 	: defaultBgColor,
		'color'				: colors[pageType]

	};
	
	for(var i = imageCount ; i > 0 ; i--){

		$(".imageSelector").append("<div class='selector' name="+i+" id='selector_"+i+"'>"+i+"</div>");
		$("#selector_"+i).css(cssOut);

		//set styling
		$("#selector_"+i).hover( 
			function(){
				if($(this).attr('name')!=cursor){
					$(this).css(cssOver);
				}
			},
			function(){
				if($(this).attr('name')!=cursor){
					$(this).css(cssOut);
				}
			}

		)
		//set click events
		$("#selector_"+i).click( function(){
			clearTimeout(tInterval);
			playReelEnabled=false;
			updateCursor($(this).attr('name'));
			showPicture();

		}) 

	}

}



function showPicture(){ //displays next picture
	updateCursorControl();
	$('#image_'+cursor).css("opacity","0");
	$('#image_'+cursor).show();
	$('#image_'+oldCursor).hide();
	$('#image_'+cursor).fadeTo("fast", 1, function (){
		if(playReelEnabled){
			playReel();
		}
	});
}

function playReel(){
	clearTimeout(tInterval);
	tInterval = setTimeout(
		function(){
			incrementCursor();
			$('#image_'+oldCursor).fadeTo("fast", 0, showPicture);		
		}, timer
	);
}
function incrementCursor(){
	oldCursor=cursor;
	cursor++;
	if(cursor > imageCount) {
		cursor=startCursor;
	}

}

function updateCursor(newCursor){
	

	if(newCursor != cursor){
		oldCursor=cursor;		
	}
	cursor=newCursor;


}
function updateCursorControl(){
	$('#selector_'+oldCursor).css(cssOut);
	$('#selector_'+cursor).css(cssSelected);
	
}