/**
 * @author daco
 */

var portfolioListEvent = function(){

	if ($$('#portfolioList a').length == 0) {return;}

	
	
	// insert two anti-hover elements in top and bottom
	var anti1 = new Element('div').setStyle({position:'absolute',height:'20px',left:'568px',top:'150px',width:'200px'});
	var anti2 = new Element('div').setStyle({position:'absolute',height:'20px',left:'568px',bottom:'50px',width:'200px'});
	$('portfolioList').insert({after:anti1}); $('portfolioList').insert({after:anti2});  
	
	var base	= $('portfolioList').readAttribute('base');

	var hoverelement	= new Element('div', {id:'portfoliolist_hover'}).hide();
	var wowow			= new Element('div', {id:'wowwow'});
	
	var images = [0,1,2,3].map(function(){return new Element('img')})
	
	$('main').insert(hoverelement); 
	images.each(function(img){hoverelement.insert(img)})

	hoverelement.insert(wowow);
	
	var mouseover = function(){
		
		this.addClassName('hover');
		var preview = this.readAttribute('preview').evalJSON();

		images.invoke('hide');

		preview.each(function(img, i){

				images[i].src = base + img;
							
			}
		)

		images.invoke('appear',{duration:.4});
		
		var scrollTop = ComicHouse.scrollBars.get('portfolioList').getScrollTop();
		hoverelement.setStyle({top:this.offsetTop - scrollTop + 111 + 'px'});
		hoverelement.show();

	}

	var mouseout = function(){
		if (this.down('a.hover')) 
			this.down('a.hover').removeClassName('hover');
		else
			this.removeClassName('hover');
		hoverelement.hide();		
	}

	Event.observe($('portfolioList'), 'mousewheel', mouseout, true);
	Event.observe($('portfolioList'), 'DOMMouseScroll', mouseout, true);

	$$('#portfolioList a').each(function(node){
	
		node.observe('mouseover', mouseover)
		node.observe('mouseout', mouseout)	
	
	})
	
}


document.observe('dom:loaded', portfolioListEvent);