var PortfolioManager = function() {
	this.projects = [];
};

PortfolioManager.prototype = {
	createProject: function(obj) {
		p = new Project(obj);
		this.projects.push(p);
	},
	
	firstProject: function() {
		return this.projects[0];
	},
	
	retrieve: function(url) {
		var self = this;
		new Ajax.Request(url, {
		  method: 'get',
		  onSuccess: function(transport) {
		  	jsonresult = transport.responseText.evalJSON();
			for(i=0; i<jsonresult.length; i++) {	
				self.createProject(jsonresult[i]);		
			}
			self.draw();
			// fs = new Ferdinand.Slider('portfolio_pane', {}, pm.firstProject());	
		  }
		});		
	},
	
	draw: function() {
		for(i=0; i < this.projects.length; i++) {	
			$('thumbs').appendChild(new PortfolioThumb(this.projects[i]).getElement());
			// console.log(this.projects[i]);
		}
	}
		
	
};

/* Class Project */
var Project = Class.create({
	initialize : function(obj){
		// console.log(obj);
		this.pid = obj.pid;
		this.name = obj.name;
		this.url = obj.url;
		this.description = obj.description;
		this.assets = obj.assets;
		return this;
	},
	
	getElement : function() {
		return this.element;
	},
	
	getFirstImage : function() {
		el = document.createElement('img');
		el.src = 'assets/' + this.pid + '01.jpg';
		return el;
	}	
});

var PortfolioViewer = Class.create({
	initialize: function(element, options) {
		
		element = $( element );
		this.element = element;
				
		this.options = options;
		this.options = Object.extend({
				effectDuration: 0.6,
				transitionDuration: 0.6,
				timeout:3500, 
				opacity:null, /*null for transparent png or value from 0 to 1 for css opacity*/
				background:'images/background.png', /*if opacity is set to null, please provide transparent background image */
				loader: 'images/ajax-loader.gif',
				next: 'images/next.png',
				previous: 'images/previous.png',
				type: 'json', /*placeholder for future releases*/
				url:"callback.json",
				titleClass: 'title',
				excerptClass: 'tekst',
				wrapbg: '#000000',
				containerClass: 'ferdinand-slider'
			}, options || {});
			
		this.createImage();
		this.createPagination();
		this.createProjectTitle();
		this.createCaption();
		this.createVisitSite();
		this.PNGFix();
	},
	
	PNGFix: function () {
		var version = parseFloat(navigator.appVersion.split('MSIE')[1]);
		if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
			document.getElementsByClassName('ie-fix-opacity').each(function(poElement){
				// if IE5.5+ on win32, then display PNGs with AlphaImageLoader
				var cBGImg = poElement.currentStyle.backgroundImage;
				var cImage = cBGImg.substring(cBGImg.indexOf('"') + 1, cBGImg.lastIndexOf('"'));
						
				poElement.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + cImage + "', sizingMethod='scale')";
				poElement.style.backgroundImage = "none";
			});
		}
	},
	
	createImage: function() {
		this.image = new Element('img');
		this.image.setStyle({cssFloat: 'none'});
		this.element.appendChild(this.image);
	},
	
	createCaption: function() {
		this.caption = new Element('div');
		this.caption.setAttribute('class','caption');
		this.element.appendChild(this.caption);
	},
	
	createProjectTitle: function() {
		this.projectTitle = new Element('div');
		this.projectTitle.setAttribute('class','project_title');
		this.element.appendChild(this.projectTitle);
	},
	
	createPagination: function() {
		var pag = new Element('div');
		pag.setAttribute('id','pagination-wrapper');
		this.element.appendChild(pag);
	},
	
	createVisitSite: function() {
		this.visit_site = new Element('div');
		this.visit_site.setAttribute('class','visit_site');
		this.element.appendChild(this.visit_site);
	},
	
	refreshPagination: function() {
		paginator = new Element('ul');
		paginator.setAttribute('id','paginator');
		for(i=0; i < this.items.length; i++) {
			li = new Element('li');
			a = new Element('a');
			a.href = "#";
			a.innerHTML = i + 1;
			a.setAttribute('id', "port" + (i + 1));
			li.appendChild(a);
			a.observe('click',function(e) {

				pv.showImage(parseInt(e.target.innerHTML) - 1);
			});	
			paginator.appendChild(li);
		};
		
		$('pagination-wrapper').childElements().each(function(a){
			a.remove();
		});
		this.paginator = paginator;
		$('pagination-wrapper').appendChild(this.paginator);
	},
	
	showImage: function(index) {
		clearTimeout(t);
		index = parseInt(index);
		this.current_key = index;
		// console.log('showImage called with index:' + index);
		// this.tempimage.setAttribute('src', this.items[index].image);
		// 
		// if (this.tempimage.complete) {
		// 	new Effect.Fade(this.image,{ from: 1.0, to: 0.0, 
		// 								 duration: 0.6});
		// 								
		// 	// this.image.src = this.items[index].image;
		// 	this.image.src = this.tempimage.src;
		// 	new Effect.Appear(this.image,{ 
		// 						from: 0.0, to: 1.0, 
		// 						duration: 0.6});
		// } 
		// else 
		// {
		// 	this.tempimage.observe('load', function(index){
		// 		this.showImage(index);
		// 	}.bind(this));				
		// }
		
		this.image.src = this.items[index].image;
		
		// remove the selected_pagination class from each of the pagination links
		$('paginator').childElements().each(function(li){
			li.firstDescendant().removeClassName('selected_pagination');
		});
		
		$('port' + (parseInt(index + 1)).toString()).addClassName('selected_pagination');
		
		// console.log("Showing ..." + this.items[index].image);
		t = setTimeout(function(){	
			this.showImage(this.current_key + 1);
		}.bind(this), 4500);
	},
	
	showPortfolio: function(project) {
		new Effect.Fade('opening_statement');
		new Effect.Fade('profile_statement');
		
		// $('portfolio_pane').show();
		new Effect.Appear('portfolio_pane', {queue:'end'});
		this.project = project;
		this.loadProjectAssets();
		clearTimeout(t);
		
		this.refreshPagination();
		this.projectTitle.innerHTML = this.project.name;
		this.caption.innerHTML = this.project.description;
		if (this.project.url != '') {
			this.visit_site.innerHTML = "<a href='" + this.project.url + "'>Visit Site</a>";
		} else {
		    this.visit_site.innerHTML = "";
		}
		
		new Effect.Appear(this.caption);
		
		this.showImage(0);
	},
	
	loadProjectAssets: function() {
		this.items = [];
		// console.log("assets" + this.project.assets);
		for (i=0; i < this.project.assets; i++) {
			obj = new Object();
			obj.image = "assets/" + this.project.pid + "0" + (i + 1) + ".jpg";
			// console.log(obj.image);
			obj.body = this.project.description;
			obj.title = this.project.name;
			this.items.push(obj);
		}
	},
	
	hide: function() {
		new Effect.Move(this.element,{x:5000,y:150,mode: 'absolute',duration:0.5});
	}
});

var PortfolioThumb = Class.create({
	initialize: function(project) {
		this.project = project;
		this.base_url = 'assets/thumbnails/';
		this.element = this.build();
		return this;
	},
	
	build: function() {
		el = new Element('a');
		el.href = '#';
		el.title = this.project.name;
		img = new Element('img');
		img.src = this.offImageSrc();
		img.alt = this.project.name;
		img.className = 'thumb';
		el.appendChild(img);
		img.observe('mouseover',function(e) {
			this.over();
		}.bind(this));
		img.observe('mouseout',function(e) {
			this.out();
		}.bind(this));
		img.observe('click',function(e) {
			pv.showPortfolio(this.project);
		}.bind(this));
		return el;
	},
	
	getElement: function() {
		return this.element;
	},
	
	over: function() {
		this.element.firstChild.src = this.overImageSrc();
	},
	
	out: function() {
		this.element.firstChild.src = this.offImageSrc();
	},
	
	overImageSrc: function() {
		return this.base_url + this.project.pid + "00_on.jpg";
	},
	
	offImageSrc: function() {
		return this.base_url + this.project.pid + "00_off.jpg";
	}
	
});


var t;

showProjects = function(){
	// $('portfolio_pane').show();
	pv.showPortfolio(pm.firstProject());
	new Effect.Fade('profile_statement');
	new Effect.Fade('opening_statement');
	new Effect.Appear('portfolio_pane', {queue:'end'});
}

showProfile = function() {
	new Effect.Fade('portfolio_pane');
	new Effect.Fade('opening_statement');
	new Effect.Appear('profile_statement', {queue: 'end'});
}

showMain = function(){
	new Effect.Fade('portfolio_pane');
	new Effect.Fade('profile_statement');
	new Effect.Appear('opening_statement', {queue: 'end'});
	
}

Event.observe(window,"load", function() {
	pm = new PortfolioManager();
	pv = new PortfolioViewer('portfolio_pane');
	pm.retrieve("data/data.json");
	$('portfolio_pane').hide();
	$('opening_statement').hide();
	new Effect.Appear('opening_statement');
});