var img=null;
var prev = 0;
var cur = 1;

function navigate(mode)
{
	if(mode) 
	{
		if(cur>img.length-1)
		{	cur=0;
			prev= img.length-1;
		}
		
        $(img[prev]).fadeOut(500);
	    $(img[cur]).fadeIn(500);
	
        prev = cur++;
    
        if(prev > img.length-1)
        {	cur=0;
		prev= img.length-1;
	}

	}
	else {
		cur--;
		prev--;
		
		if(prev<0)
		{	cur=0;
			prev= img.length-1;
		}
		if(cur<0)
		{	cur=img.length-1;
			prev=cur-1 ;		
		}
		$(img[cur]).fadeOut(500);
		$(img[prev]).fadeIn(500);
	}
}

$(document).ready(function(){

    img = document.getElementById('images').getElementsByTagName('img');
    for(var i=1;i<img.length;i++)
		img[i].style.display = 'none';
		
		$("#leftscreen").click(function() {
		navigate(0);
		});
		
		$("#rightscreen").click(function() {
		navigate(1);
		});


	$("#comm_nav").hover(
    function() {
		$(this).stop().animate({"opacity": "1"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
    function() {
		$(this).stop().animate({"opacity": "0"}, "slow");
		});
            
    $("#non_comm_nav").hover(
    function() {
		$(this).stop().animate({"opacity": "1"}, "slow");
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
	function() {
		$(this).stop().animate({"opacity": "0"}, "slow");
		});
            
    $("#info_nav").hover(
	function() {
		$(this).stop().animate({"opacity": "1"}, "slow");
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		},
	function() {
		$(this).stop().animate({"opacity": "0"}, "slow");
		});
            
    $("#leftscreen").hover(
	function() {
		$(this).stop().animate({"opacity": ".7"}, "slow");
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
	function() {
        $(this).stop().animate({"opacity": ".1"}, "slow");
        });

    $("#leftscreen").stop().animate({"opacity": ".1"}, "slow");            
    $("#rightscreen").stop().animate({"opacity": ".1"}, "slow");
	
    $("#rightscreen").hover(
	function() {
		$(this).stop().animate({"opacity": ".7"}, "slow");
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
    function() {
		$(this).stop().animate({"opacity": ".1"}, "slow");
		});
            
    $("#commissioned").hover(
	function() {
		$("#comm_nav").stop().animate({"opacity": "1"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
	function() {
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		});
            
    $("#noncommissioned").hover(
	function() {
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "1"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		},
	function() {
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		});
            
    $("#info").hover(
	function() {
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "1"}, "slow");
		},
	function() {
		$("#comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#non_comm_nav").stop().animate({"opacity": "0"}, "slow");
		$("#info_nav").stop().animate({"opacity": "0"}, "slow");
		});
});