Element.observe(document, 'dom:loaded', function(){	
	hideImages();
	$('image_1').setStyle({display: 'block'});
	$('button_1').addClassName('on');
	count();
	});


function hideImages(){
	var imagelist = $$('#project_images li');
	var images = $A(imagelist);
	images.each(function(image){
		image.setStyle({display: 'none'});;
		});
	};
	
function buttonsOff(){
	var buttonlist = $$('#image_select a');
	var buttons = $A(buttonlist);
	buttons.each(function(button){
		button.removeClassName('on');
		});
	};
	
function buttonAction(button,image) {
	$(button).observe('click', function(event){
		hideImages();
		$(image).setStyle({display: 'block'});
		buttonsOff();
		var element = event.element();
		element.addClassName('on');
		Event.stop(event);	
		// initiate projectImageShifting
		projectImageInitWithImage(image);
		 
	});
};

function count() {
	var imagelist = $$('#project_images li');
	var images = $A(imagelist);
	var imageNumber = images.size();
	if (imageNumber==0){
		return false;
	}
 	if (imageNumber<=1){
		buttonAction('button_1','image_1');
		return false;
	}
	else if (imageNumber>=1){
		buttonAction('button_1','image_1');
	}
	if (imageNumber<=2){
		buttonAction('button_2','image_2');
		return false;
	}
	else if (imageNumber>=2){
		buttonAction('button_2','image_2');
	}
	if (imageNumber<=3){
		buttonAction('button_3','image_3');
		return false;
	}
	else if (imageNumber>=3){
		buttonAction('button_3','image_3');
	}
	if (imageNumber<=4){
		buttonAction('button_4','image_4');
		return false;
	}
	else if (imageNumber>=4){
		buttonAction('button_4','image_4');
	}
	if (imageNumber<=5){
		buttonAction('button_5','image_5');
		return false;
	}
	else if (imageNumber>=5){
		buttonAction('button_5','image_5');
	}
	if (imageNumber<=6){
		buttonAction('button_6','image_6');
		return false;
	}
	else if (imageNumber>=6){
		buttonAction('button_6','image_6');
	}
	if (imageNumber<=7){
		buttonAction('button_7','image_7');
		return false;
	}
	else if (imageNumber>=7){
		buttonAction('button_7','image_7');
	}
};