// JavaScript Document

$(document).ready(function() {
	var countImages = $('#move-images > *').length;
	var countLinks = $('#top-links > *').length;
	var divWidth = countImages * 760;
	var count = 1;
	var moveImageBy = new Array(countLinks);
	moveImageBy[0] = 0;
	var imageSource;
	
	$('#move-images').css({ 'width' : divWidth +'px'});
	imageSource = $('.on').attr('src').replace('.gif', '-f2.gif');
	$('.on').attr({src: imageSource});
	
	for (var i=1; i<countLinks; i++) {
		moveImageBy[i] = -(count * 760);
		count++;
	}
	
	count =0;
	
	$('div.nav').click(function () { 
		var ID = $(this).attr('id');
		ID = ID.replace('link-','');
		$('#move-images').animate({
			left : moveImageBy[ID]+'px'
		},'fast');
		
		
		imageSource = $('.on').attr('src').replace('-f2.gif', '.gif');
		$('.on').attr({src: imageSource});
		$('.on').removeClass('on');
		imageSource = $(this).children().attr('src').replace('.gif', '-f2.gif');
		$(this).children().attr({src: imageSource});
		$(this).children().addClass('on');
    });
	$('#move-images a').click(function () { 
		var ID = $(this).attr('class');
		ID = ID.replace('link-','');
		$('#move-images').animate({
			left : moveImageBy[ID]+'px'
		},'fast');
		imageSource = $('.on').attr('src').replace('-f2.gif', '.gif');
		$('.on').attr({src: imageSource});
		$('.on').removeClass('on');
		imageSource = $('#link-'+ID).children().attr('src').replace('.gif', '-f2.gif');
		$('#link-'+ID).children().attr({src: imageSource});
		$('#link-'+ID).children().addClass('on');
    });
});