/** 
 * Custom javascript for Delfland 
 * Created by Hans Dubois for Redmax Technology B.V. 2010
 * www.redmax.nl
 * www.golfbaandelfland.nl
 */ 

var photoAlbumJs = Class.create({
	albumPath : '', 
	pictures : '',
	currentSet : 0,
	allowActions : true,
	Effect : null,
	page : 1,
	maxPage : 1, 
	picturesPerPage : 4,
	stripWitdh : 425,
	
	// Functions
	initialize: function(path) {
		this.albumPath = path;
		
		// Fetch the Json. 
		var url = '/PhotoAlbumJSON?path='+path;
    	
		new Ajax.Request(url, {
		  method: 'get',
		  onSuccess: function(transport) {
			var json = transport.responseText.evalJSON();
			
			photoAlbum.parseJson(json);
		  }
		});
	}, 
	
	parseJson : function(json){
		// Add pictures
		this.pictures = json.photoalbum_photos;
		this.addPictures();
		
		// Set max page
		var pageNumber = (this.pictures.length / this.picturesPerPage); 
		this.maxPage = Math.ceil(pageNumber);
		
		// Add pages
		this.addPages();
	}, 
	
	addPictures : function(){
		for(var i=0; i<this.pictures.length; i++){
			this.addPictureToDiv(this.pictures[i]);
		}
	}, 
	
	addPictureToDiv : function(picture){
		// Containing Div
		var pictureDiv = Builder.node('div', {
			className : "slideImg"
		});
		
		var a = Builder.node('a', {
			className : 'lightview',
			href : picture.file_path,
			rel: 'gallery[golfset]'
		});
		
		// Image
		var image = Builder.node('img', {
			src : picture.file_path
			//alt : picture.file_title,
			//className : 'lightbox'
		});
		
		// Title
		var title = Builder.node('div', {
			className : 'blueBold'
		}, picture.properties.title.value);
		
		// Title
		var subTitle = Builder.node('div', {
			className : 'greyNormal'
		});
		
		subTitle.innerHTML = picture.properties.subtitle.value;
		
		// Append 
		a.appendChild(image);
		pictureDiv.appendChild(a);
		pictureDiv.appendChild(title);
		pictureDiv.appendChild(subTitle);
		
		// Append to DOM
		$('imageContainer').appendChild(pictureDiv);
	}, 
	
	moveLeft : function(){		
		if(this.Effect == null || this.Effect.state != 'running'){
			if(this.page > 1){
				this.Effect = new Effect.Move('imageContainer', { x: 425, y: 0, duration : 1.0});
		
				// Set page
				var pageNumber = (this.page - 1); 
				this.setPage(pageNumber);
			}
		}
	},
	
	moveRight : function(){
		if(this.Effect == null || this.Effect.state != 'running'){
			if(this.page < this.maxPage){
				this.Effect = new Effect.Move('imageContainer', { x: -425, y: 0, duration : 1.0});
				
				// Set page
				var pageNumber = (this.page + 1); 
				this.setPage(pageNumber);
			}
		}
	}, 
	
	addPages : function(){
		for(i=1; i <= this.maxPage; i++){
			
			var pageclass = '';
				
			// Create classname
			if (i == 1){
				pageclass = 'greenDot';
			}else{
				pageclass = 'greyDot';
			}
			
			// Create button
			var pageButton = Builder.node('div',{ 
				id : 'pageButton'+i,
				className : pageclass, 
				onclick : 'photoAlbum.movePage('+i+')'
			});
			
			// Append button
			$('paging').appendChild(pageButton);
		}	
	},
	
	// Set the page
	setPage : function (number){
		// Fix old page button
		$('pageButton'+this.page).className = 'greyDot';
		
		// Fix New
		$('pageButton'+number).className = 'greenDot';
		
		// Set number
		this.page = number;
	},
	
	// Move to a page
	movePage : function (target){
		if(target != this.page){
			// See if there is an effect running
			if(this.Effect == null || this.Effect.state != 'running'){
				// Determine direction
				if(target > this.page){
					// Calculate
					var timesToMove = (target - this.page);
					var pixelsToMove = (this.stripWitdh * timesToMove);
										
					// Effect
					this.Effect = new Effect.Move('imageContainer', { x: '-'+pixelsToMove, y: 0, duration : 1.0});
					
					// Set page
					this.setPage(target);
					
				}else if(target < this.page){
					// Calculate
					var timesToMove = (this.page - target);
					var pixelsToMove = (this.stripWitdh * timesToMove);
					
					// Effect
					this.Effect = new Effect.Move('imageContainer', { x: pixelsToMove, y: 0, duration : 1.0});
					
					// Set page
					this.setPage(target);
				}
			}	
		}
	}
});