/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- onload
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

Event.observe(window, 'load', function(){

	initGallery();

});

function setFocusClass(evt){
	if(!evt.target.hasClassName('focus'))
		evt.target.addClassName('focus')
}

function blurFocusClass(evt){
	if(evt.target.hasClassName('focus'))
		evt.target.removeClassName('focus')
}

function scrollToForm(evt){
	evt.stop();
	new Effect.ScrollTo('form');
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- image gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

var pics = new Array();
pics.push('/static/img/pictures/pic1.jpg','');
pics.push('/static/img/pictures/pic2.jpg','');
pics.push('/static/img/pictures/pic3.jpg','');
pics.push('/static/img/pictures/pic4.jpg','');
pics.push('/static/img/pictures/pic5.jpg','');
pics.push('/static/img/pictures/pic6.jpg','');
pics.push('/static/img/pictures/pic7.jpg','');
pics.push('/static/img/pictures/pic8.jpg','');

var numberOfImagesToShow = 5;
var currentFirstImage = 0;


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- initiate gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

function initGallery(){
	
	// create the html code for the gallery
	var galleryItems = '<ul id="galleryUl">';
	galleryItems += '<li><img src="/static/img/arrow_left.jpg" alt="" id="arrowLeft" onclick="showPreviousItem();" /></li>';
	
	// use i for looping through the path & alt in the array
	// and j for the item id
	var i = 0;
	var j = 0;
	
	// loop
	while(i<pics.length){	
		galleryItems += '<li id="item'+j+'"><img src="'+pics[i]+'" alt="'+pics[i+1]+'" /></li>';	
		
		i += 2;
		j++;
	}
	
	galleryItems += '<li id="arrowRightLi"><img src="/static/img/arrow_right.jpg" alt="" id="arrowRight" onclick="showNextItem();" /></li>';
	galleryItems += '</ul>';
	
	$('gallery').innerHTML = galleryItems;
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- next item
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

function showNextItem(evt){
	if(evt) evt.stop();
	
	if(currentFirstImage <= pics.length / 2 - numberOfImagesToShow-1){
		
		$('item'+(currentFirstImage+numberOfImagesToShow)).hide()

		new Effect.Appear ($('item'+(currentFirstImage+numberOfImagesToShow)), { duration: 1});
		
		$('item'+currentFirstImage).hide();
		
		currentFirstImage++;
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- previous item
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

function showPreviousItem(evt){
	if(evt) evt.stop();
	
	if(currentFirstImage > 0){
		currentFirstImage--;
		new Effect.Appear ($('item'+currentFirstImage));
	}
}