var Portfolio = new Class({
	
    Implements: [Options, Events],
	
    options: {
		
		url					: '/wp-content/themes/Digitalestheme/',
		jsonForPortfolio	: 'json-showportfolio.php',
		jsonForCategory		: 'json-showcategory.php',
		jsonForProject		: 'json-showproject.php',
		imagePath			: 'http://www.digitales.nl/wp-content/themes/Digitalestheme/images/dummies/'
    },
	
    initialize: function(options) {
		
		var foo = this.get("#");
		if (foo>0) {	
		window.addEvent('domready', function() {	
			this.setOptions(options);
			this.fxNavigate;
			this.getPortfolio();
			alert('aa');
			this.getProject(foo);		
			}	
			);
		} else {
        	this.setOptions(options);
			this.fxNavigate;
			this.getPortfolio();
		}
	},
	
	getAjax: function(url, onSuccess, params) {
		
		var myRequest = new Request.JSON({
										 
            method		: 'get',
            url			: url,
            onSuccess	: onSuccess.bind(this),
			onFailure	: this.showError
			
        }).send(params);
	},
	
	showError: function() {
		
		alert('Het request kon niet worden voltooid');
	},
	
	getPortfolio: function() {
		
		this.getAjax(this.options.url + this.options.jsonForPortfolio, this.showPortfolio, '');
	},
	
	showPortfolio: function(responseJSON) {
		
		var categoryList = new Element('ul').inject($('portfolioCategories'));
		
		var categories = responseJSON.categories;
		
		categories.each(function(category, index) {
			
            var oCategory = new Element('li').addEvents({
				
				'mouseenter': function() { this.addClass('hover'); },
				'mouseleave': function() { this.removeClass('hover'); },
				'click'	: function() {
					
					$('portfolioCategories').getElements('li').each(function(category) {
						
						category.removeClass('active');
					});
					
					this.addClass('active');
				}		
			});
			
			oCategory.inject(categoryList)
			
			var oSpan = new Element('span', {
				
				'html'	: category.name,
				'title'	: category.name
				
			}).addEvents({
				
				'click'	: function(e) { this.getCategory(category.id); }.bind(this)
				
			}).inject(oCategory);
			
			if(index == 0) {
				
				oCategory.addClass('firstCategory');
				oCategory.fireEvent('click');
				oSpan.fireEvent('click');
			}
			
		}, this);
		
		this.generateNavigation();
	},
	
	generateNavigation: function() {
		
		var oNavLeft = new Element('div', {
			
			'id'	: 'navLeft',
			'class'	: 'navLeftDisabled',
			'title'	: 'Scroll to the left'
			
		}).inject($('portfolioProjects'), 'top');
		
		var oNavLeft = new Element('div', {
			
			'id'	: 'navRight',
			'class'	: 'navRightDisabled',
			'title'	: 'Scroll to the right'
			
		}).inject($('portfolioProjects'));
		
		this.fxNavigate = new Fx.Tween($('showreel'), {
										 
			'duration'	: 300,
			'wait'		: true
			
		}).addEvents({
			
			'complete': function() { this.checkNavigation(); }.bind(this)
		});
	},
	
	get: function(key,url){  
    if(arguments.length < 2) url =location.href;  
    if(arguments.length > 0 && key != ""){  
        if(key == "#"){  
            var regex = new RegExp("[#]([^$]*)");  
        } else if(key == "?"){  
            var regex = new RegExp("[?]([^#$]*)");  
        } else {  
            var regex = new RegExp("[?&]"+key+"=([^&#]*)");  
        }  
        var results = regex.exec(url);  
        return (results == null )? "" : results[1];  
    } else {  
        url = url.split("?");  
        var results = {};  
            if(url.length > 1){  
                url = url[1].split("#");  
                if(url.length > 1) results["hash"] = url[1];  
                url[0].split("&").each(function(item,index){  
                    item = item.split("=");  
                    results[item[0]] = item[1];  
                });  
            }  
        return results;  
    }  
}, 
	
	getCategory: function(id) {
		
		this.getAjax(this.options.url + this.options.jsonForCategory, this.showCategory, 'id=' + id);
	},
	
	showCategory: function(responseJSON) {
		
		var projects = responseJSON.projects;
		
		var imagePath = this.options.imagePath;
		
		$('showreel').empty();
		$('portfolioDisplay').getElement('h3').empty();
		$('about').empty();
		$('notebook').empty();
		
		$('bekijkOnline').setStyle('display', 'none');
		
		$('showreel').setStyles({
			
			'left'	: 0,
			'width'	: projects.length * 115
		});
		
		projects.each(function(project, index) {
									 
            var oItem = new Element('div').addClass('project').setOpacity(0).addEvents({
				
				'click'	: function(e) { this.getProject(project.id); }.bind(this)
				
			}).inject($('showreel'));
			
			var oImage = new Asset.image(imagePath + project.image, {
							 
				alt: project.name,
				
				title: project.name,
				
				onload: function() {
					
					oImage.inject(oItem);
					
					oItem.fade();
					
					if(index == 0) {
						
						$('portfolioDisplay').getElement('h3').setOpacity(0);
						$('about').setOpacity(0);
						$('bekijkOnline').setOpacity(0);
						
						$('portfolioDisplay').getElement('h3').fade('in');
						$('about').fade('in');
						$('bekijkOnline').fade('in');
						
						oItem.fireEvent('click');
					}
				}
			});
			
		}, this);
		
		this.initNavigation(projects.length);
	},
	
	initNavigation: function(projects) {
		
		$('navLeft').addClass('navLeftDisabled');
		$('navLeft').removeClass('navLeftEnabled');
		
		if(projects > 7) {
			
			$('navRight').addClass('navRightEnabled');
			$('navRight').removeClass('navRightDisabled');
			
			$('navLeft').addEvents({ 'click': function(projects) { this.navigateToLeft(projects); }.bind(this) });	
			$('navRight').addEvents({ 'click': function(projects) { this.navigateToRight(projects); }.bind(this) });	
		
		} else {
			
			$('navRight').addClass('navRightDisabled');
			$('navRight').removeClass('navRightEnabled');
		}
	},
	
	navigateToLeft: function() {
		
		if($('navLeft').hasClass('navLeftEnabled')) {
		
			var curPosX = $('showreel').getPosition($('mask')).x;
			
			this.fxNavigate.start('left', curPosX + 115);
		}
	},
	
	navigateToRight: function() {
		
		if($('navRight').hasClass('navRightEnabled')) {
			
			var curPosX = $('showreel').getPosition($('mask')).x;
			
			this.fxNavigate.start('left', curPosX - 115);
		}
	},
	
	checkNavigation: function() {
		
		var showreelSize = $('showreel').getSize().x;
		
		if(showreelSize > 805) {
			
			var curPosX = $('showreel').getPosition($('mask')).x;
			
			if(curPosX == 0) {
				
				$('navLeft').addClass('navLeftDisabled');
				$('navLeft').removeClass('navLeftEnabled');
				
			} else {
				
				$('navLeft').addClass('navLeftEnabled');
				$('navLeft').removeClass('navLeftDisabled');
			}
			
			if((showreelSize - 805) == 0 - curPosX) {
				
				$('navRight').addClass('navRightDisabled');
				$('navRight').removeClass('navRightEnabled');
			
			} else {
				
				$('navRight').addClass('navRightEnabled');
				$('navRight').removeClass('navRightDisabled');
			}
		}
	},
	
	getProject: function(id) {
		this.getAjax(this.options.url + this.options.jsonForProject, this.showProject, 'id=' + id);
	},
	
	showProject: function(responseJSON) {
		
		var project = responseJSON;
		
		var imagePath = this.options.imagePath;
		
		$('portfolioDisplay').getElement('h3').empty();
		$('about').empty();
		$('notebook').empty();
		
		$('portfolioDisplay').getElement('h3').set('text', project.name);
		
		var oDescription = new Element('p').set('html', project.description).inject($('about'));
		
		var oImage = new Asset.image(imagePath + project.image, {
						 
			alt: project.name,
			
			title: project.name,
			
			onload: function() {
				
				oImage.setOpacity(0).inject($('notebook'));
				
				oImage.fade();
			}
		});
		
		$('bekijkOnline').getElement('a').setProperty('href', 'http://' + project.url);
		
		$('bekijkOnline').setStyle('display', 'block');
	}
});

window.addEvent('domready', function() {
									 
	var myPortfolio = new Portfolio();
			
	});