var Projects = {
	
	path : '/',
	id : null,
	mode : null,
	sortBy: null,
	data : null,
	spinnerTarget : null,
	content : null,
	sortListVisible	: false,
	
	init: function()
	{
		
		Projects.id					= $(document.body).id.split('-')[1];
		Projects.mode				= 'listed';
		Projects.sortBy				= 'rank';
		Projects.spinnerTarget		= $('primary');

		Projects.addEventListeners();
		
	},
	
	printPertyData: function(data) {
      return JSON.encode(data).replace(/(\},)/g, '},\n').replace(/\[\{/g, '[\n{').replace(/\}\]/g, '}\n]').replace(/\{/g, '  {');
    },
	
	addEventListeners: function()
	{
		$('sort-by').addEvent('click', function(event) {
			event.preventDefault();
			Projects.toggleSortOptions();
		});
		$('view-listed').addEvent('click', function(event) {

			event.preventDefault();
			Projects.mode = 'listed';
			Projects.requestData();

			$('view-expanded').removeClass('selected');
			this.addClass('selected');

		});
		$('view-expanded').addEvent('click', function(event) {
		
			event.preventDefault();
			Projects.mode = 'expanded';
			Projects.requestData();

			$('view-listed').removeClass('selected');
			this.addClass('selected');

		});
		$('by-client').addEvent('click', function(event) {

			event.preventDefault();
			Projects.sortBy = 'client';
			Projects.requestData();

			$('by-date').removeClass('selected');
			this.addClass('selected');

		});
		$('by-date').addEvent('click', function(event) {
		
			event.preventDefault();
			Projects.sortBy = 'date';
			Projects.requestData();
	
			$('by-client').removeClass('selected');
			this.addClass('selected');

		});
	},
	
	toggleSortOptions : function() {
	
		var morph;
	
		Projects.sortListVisible = !Projects.sortListVisible;
		
		if (Projects.sortListVisible) {
		
			morph = new Fx.Morph($('view-sort-options'),
			{
				duration : 'short',
				transition : 'quart:out'
			}).set({
			    'opacity': 0,
			    'left': -40
			}).start({
				'opacity' : 1,
				'left': 0
			});
			
			$('view-sort').addClass('selected');

		} else {
		
			morph = new Fx.Morph($('view-sort-options'),
			{
				duration : 'short',
				transition : 'quart:in'
			}).start({
				'opacity' : 0,
				'left': -40
			});
		
			$('view-sort').removeClass('selected');
		
		}
		
	},
	
	requestData : function()
	{
		if (Projects.data == null) {
			var url = 'index.php?action=view&view=' + Projects.id + '&rtemplate=2950&type=json';
			var request = new Request.JSON({
				url: Projects.path + url,
				useSpinner: true,
				spinnerTarget: Projects.spinnerTarget,
				onComplete: function(response) {
					Projects.data = response;
					Projects.sortData();
					Projects.updateView();
				}
			}).send();
		} else {
			Projects.sortData();
			Projects.updateView();
		}
		
	},
	
	sortData: function() {
		switch(Projects.sortBy)
		{
			case 'rank' :
				Projects.data.sortOn("id");
				break;
			case 'client' :
				Projects.data.sortOn("client", Array.CASEINSENSITIVE | Array.DESCENDING);
				break;
			case 'date' :
				Projects.data.sortOn("date", Array.NUMERIC | Array.DESCENDING);
				break;
		}
	},
	
	updateView: function()
	{

		$('projects-listing').dispose();
		
		var ul = new Element('ul', {'class' : 'listing ' + Projects.mode + '-view', 'id' : 'projects-listing'}).inject($('primary'));

		$each(Projects.data, function(item,index)
		{
		
			if (item.id != '')
			{

				var li = new Element('li', {'class' : 'grid-11'});

				switch(Projects.mode)
				{
					case 'listed' :
					{
						var alpha = new Element('div', {'class' : 'grid-3 alpha'}).inject(li);
						if (item.listedPreview != "") {
							var link = new Element('a', {'href' : item.pageurl, 'title' : 'View the full project detail'}).inject(alpha);
							var img = new Element('img', {'style': 'height: 82px; width: 152px;', 'src' : item.listedPreview}).inject(link);
						}
						var omega = new Element('div', {'class' : 'grid-8 omega'}).inject(li);
						var h3 = new Element('h3').inject(omega);
						var link = new Element('a', {'href' : item.pageurl, 'title' : 'View the full project detail', 'html' : item.title}).inject(h3);
						var summary = new Element('p', {'html' : item.summary}).inject(omega);
						break;
					}
					case 'expanded' :
					{
						
						if (item.expandedPreview != "") {
							var alpha = new Element('div', {'class' : 'grid-4 alpha'}).inject(li);
							var link = new Element('a', {'href' : item.pageurl, 'title' : 'View the full project detail'}).inject(alpha);
							var img = new Element('img', {'style': 'height: 118px; width: 212px;', 'src' : item.expandedPreview}).inject(link);
							var omega = new Element('div', {'class' : 'grid-7 omega'}).inject(li);
						} else {
							var omega = new Element('div', {'class' : 'grid-11 alpha omega'}).inject(li);
						}
						
						var h3 = new Element('h3').inject(omega);
						var link = new Element('a', {'href' : item.pageurl, 'title' : 'View the full project detail', 'html' : item.title}).inject(h3);
						var summary = new Element('p', {'html' : item.summary}).inject(omega);
						var dl = new Element('dl').inject(omega);
						
						if (item.location != "") {
							var dtLocation = new Element('dt', {'class' : 'location', 'html' : 'Location:'}).inject(dl);
							var ddLocation = new Element('dd', {'class' : 'location', 'html' : item.location}).inject(dl);
						}
						if (item.client != "") {
							var dtClient = new Element('dt', {'class' : 'client', 'html' : 'Client:'}).inject(dl);
							var ddClient = new Element('dd', {'class' : 'client', 'html' : item.client}).inject(dl);
						}
						if (item.value != "") {
							var dtValue = new Element('dt', {'class' : 'value', 'html' : 'Value:'}).inject(dl);
							var ddValue = new Element('dd', {'class' : 'value', 'html' : item.value}).inject(dl);
						}
						if (item.type != "") {
							var dtType = new Element('dt', {'class' : 'type', 'html' : 'Type of Contract:'}).inject(dl);
							var ddType = new Element('dd', {'class' : 'type', 'html' : item.type}).inject(dl);
						}
						if (item.duration != "") {
							var dtDuration = new Element('dt', {'class' : 'duration', 'html' : 'Duration:'}).inject(dl);
							var ddDuration = new Element('dd', {'class' : 'duration', 'html' : item.duration + " months"}).inject(dl);
						}
						if (item.lineLength != "") {
							var dtLineLength = new Element('dt', {'class' : 'line-length', 'html' : 'Line Length:'}).inject(dl);
							var ddLineLength = new Element('dd', {'class' : 'line-length', 'html' : item.lineLength + "km"}).inject(dl);
						}
						if (item.date != "") {
							var dtEndDate = new Element('dt', {'class' : 'year', 'html' : 'Completed Year: '}).inject(dl);
							var dtEndDate = new Element('dd', {'class' : 'year', 'html' : ' ' + item.date}).inject(dl);
						}
						
						break;
					}
				
				}

				li.inject(ul);
			
			}
		
		});
		
		Cufon.refresh();

	}
	
};

window.addEvent('domready', Projects.init);