// JavaScript Document for Exmouth Art Group
// Author: Dr Matthew Ager | Doctor of Mathematics and Web Developer | Skopje

$(document).ready(function() {
	
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var paintings = $('#painting_container');
	var numberOfPaintings = $('#galleryTable img').length;
	var galleryTableAppend = '<div id="galleryCounter" class="counter"> 1 out of ' + numberOfPaintings + '</div>';
	
	$('body')
		.css({
			'overflow-x': 'hidden'
		});
	
	$('#painting_container')
		.append('<div id="rightArrow" class="arrow"></div>')
		.append('<div id="leftArrow" class="arrow"></div>')
		.append('<div id="homeArrow" class="arrow"></div>')
		.append(galleryTableAppend);
	
	$('.paintingWrapper')
		.css({
			'width': windowWidth
		});
		

//	------------- RepositionNav Function -------------
//	var $window = $(window);
//	var $nav = $('#nav');
//	function RepositionNav(){
//		var windowWidth = $window.width(); //get the width of the window
//		var navWidth = $nav.width();
//		var windowCentre = (windowWidth / 2); 
//		var navCentre = (navWidth / 2);
//		var newLeft = windowCentre - navCentre;
//		$nav.css({"left": newLeft}); //set the new top position of the navigation list
//	}

// ------------- Animation of #nav -------------
	$('.navigator .tabsChild').hover(function() {
	$(this).parent().animate( {
		left: "20px"
	}, 100)
	});
	$('.navigator .tabs').mouseleave(function() {
	$(this).animate( {
		left: "0px"
	}, 200)
	});
	

// ------------- About -------------

	$('#preAboutButton')
		.append('<div id="aboutButton"><img src="images/buttons/about.png" alt="" /></div>');
	
	$('#about')
		.css({
			'top': "220px",
			'display': 'none'
		});
	
	$('#aboutButton')
		.click(function() {
			$('#about').slideToggle("slow")
		});

// ------------- Minutes -------------

	$('#minutes')
		.css({
			'display': 'none'
		});
	
	$('#committeeButton')
		.click(function() {
			$('#minutes').slideToggle("slow")
		});

// ------------- Newsletters -------------

	$('#newsletters')
		.css({
			'display': 'none'
		});
	
	$('#newsletterButton')
		.click(function() {
			$('#newsletters').slideToggle("slow")
		});

// ------------- Activities -------------

	$('.activity')
		.css({
			'display': 'none'
		});
	
	$('.activitiesButton')
		.css({
			'marginBottom': "11px"
	});
	
	$('.activitiesButton')
		.click(function() {
			$(this).next().slideToggle("slow")
		});

// ------------- Membership -------------

	$('#membership')
		.css({
			'display': 'none'
		});
	
	$('#membershipButton')
		.click(function() {
			$(this).next().slideToggle("slow")
		});


// ------------- Animation of Paintings -------------
	var numberOfPaintings = $('.paintingWrapper').length;
	var currentPosition = 0;
	
	$('.arrow').bind('click', function() {
		if($(this).attr('id')=='rightArrow') {
			currentPosition = currentPosition+1;
		} else if($(this).attr('id')=='leftArrow') {
			currentPosition = currentPosition-1;
		} else {
			currentPosition = 0;
		}
		var currentPainting = currentPosition+1 + ' out of ' + numberOfPaintings;
		$('#galleryCounter').html(currentPainting);
		manageControls(currentPosition);
	});
	
		function manageControls(position){
    // Hide left arrow if position is first slide
		if(position==0){ $('#leftArrow').hide() } else{ $('#leftArrow').show() }
	// Hide right arrow if position is last slide
    	if(position==numberOfPaintings-1){ $('#rightArrow').hide() } else{ $('#rightArrow').show() }
    }
	
	manageControls(currentPosition); 	
	
	$('#leftArrow').click(function() {
		$('#painting_container').animate( {
			'left': "+=" + windowWidth
		}, 1500);
	});
	
	$('#homeArrow').click(function() {
		currentPosition=0;
		manageControls(currentPosition);
		$('#painting_container').animate( {
			'left': "200px"
		}, 2000);
	});

	$('#rightArrow').click(function() {
		$('#painting_container').animate( {
			'left': "-=" + windowWidth
		}, 1000);
	});
	
});