var Portfolio = {

	data: {},

	init: function(json,target) {
		this.data[target] = json.evalJSON();
		$(target).select('.portfolio-scroller a').each(function(e,indx){
			e.observe('click',Portfolio.loadPreview);
		});
		$(target).select('.portfolio-image-holder')[0].select('img','a').each(function(e){
			e.observe('click',Portfolio.showDetail);
		});
	},

	showDetail: function (event) {
		var input = Event.element(event),
			which = input.up('.portfolio-large').previous('div').select('li.active')[0].id.split('-'),
			item = Portfolio.data['frame_portfolio_' + which[1]][which[2]],
			offsetheight = $('frame_portfolio_' + which[1]).viewportOffset()[1] + $('frame_portfolio_' + which[1]).cumulativeScrollOffset()[1] - $('frame_portfolio_' + which[1]).getHeight();
		if (!$('portfolio-cover')) {
			var cover = DOMUtil.createDiv(document.body,'portfolio-cover','',false),
				detail = DOMUtil.createDiv(document.body,'portfolio-detail','',false),
				closelink = DOMUtil.createLink(detail,'javascript:;'),
				largeimg = DOMUtil.createImage(detail,'','','','large-image'),
				content = DOMUtil.createDiv(detail,'','portfolio-project-detail'),
				head = DOMUtil.createHeading(content),
				para = DOMUtil.createParagraph(content),
				list = DOMUtil.createList(DOMUtil.createDiv(detail,'','portfolio-project-nav'));
			closelink.addClassName('close');
			closelink.observe('click',function(){
				detail.hide();
				Effect.Fade(cover,{duration: 0.3});
			});
			cover.observe('click',function(){
				detail.hide();
				Effect.Fade(cover,{duration: 0.3});
			});
		} else {
			var cover = $('portfolio-cover'),
				detail = $('portfolio-detail'),
				largeimg = detail.select('img.large-image')[0],
				head = detail.down('h3'),
				para = detail.down('p'),
				list = detail.down('ul');
		}
		detail.setStyle({top: offsetheight + 'px'})
		if(list.childElements().length > 0) {
			list.select('li').each(function(li){
				li.down('a').stopObserving();
				li.remove();
			});
		}
		item.project_images.each(function(pimg,index){
			var li = DOMUtil.createLi(list);
			if (index == 0) {
				li.addClassName('active');
			}
			DOMUtil.setId(li,'img-' + index);
			DOMUtil.createLink(li,'javascript:;').observe('click',function(event){
				var input = Event.element(event);
				var largeimg = $('portfolio-detail').select('img.large-image')[0];
				$$('.portfolio-project-nav li').each(function(e){
					e.removeClassName('active');
				});
				input.up('li').addClassName('active');
				Effect.Fade(largeimg,{
					duration: 0.3,
					afterFinish: function() {
						var newimage = new Image(),
							detailindex = input.up('li').id.split('-')[1];
						$(newimage).style.display = 'none';
						$$('.portfolio-project-detail')[0].update('<h3>' + item.name + item.project_images[detailindex].image_text.title + '</h3><p>' + item.project_images[detailindex].image_text.description + '</p>')
						newimage.onload = function () {
							largeimg.width = newimage.width;
							largeimg.height = newimage.height;
							largeimg.src = item.path + item.project_images[detailindex].image.large;
							Effect.Appear(largeimg,{
								duration: 0.3
							});
						}
						newimage.src = item.path + item.project_images[input.up('li').id.split('-')[1]].image.large;
					}
				});
			});
			DOMUtil.createImage(li.down('a'),item.path + pimg.image.mini);
		});
		head.update(item.name + ' - ' + item.client);
		para.update(item.description);
		Effect.Appear(cover,{
			duration: 0.5,
			from: 0,
			to: 0.7
		});
		var newimage = new Image();
		$(newimage).style.display = 'none';
		newimage.onload = function () {
			largeimg.width = newimage.width;
			largeimg.height = newimage.height;
			largeimg.src = item.path + item.project_images[0].image.large;
			Effect.Appear(detail,{
				duration: 0.5,
				delay: 1.0
			});
		}
		newimage.src = item.path + item.project_images[0].image.large;
	},

	showPreview: function (target,item) {
		var target = $('portfolio-large-' + target),
			preview = target.select('.portfolio-image-holder')[0],
			newsrc = item.path + item.project_images[0].image.small;
		Effect.Fade(preview,{
			duration: 0.2,
			afterFinish: function () {
				preview.select('p')[0].update('<span class="bold">' + item.name + '</span> ' + item.description);
				var newimage = new Image(),
					img = preview.down('img');
				$(newimage).style.display = 'none';
				newimage.onload = function () {
					img.width = newimage.width;
					img.height = newimage.height;
					img.src = newsrc;
					Effect.Appear(preview,{duration: 0.2});
				}
				newimage.src = newsrc;
			}
		});
	},

	loadPreview: function(event) {
		var link = Event.element(event),
			li = link.up('li'),
			which = li.id.split('-'),
			item = Portfolio.data['frame_portfolio_' + which[1]][which[2]];
		li.siblings().each(function(e){
			e.removeClassName('active');
		});
		li.addClassName('active');
		Portfolio.showPreview(which[1],item);
	}
}