/*
	Portfolio Gallery v1.0
	Copyright (c) 2008 Stefan Matei
*/

var defaultName='';	// Default name to be displayed in the large view. If left empty, first element will be used.
var alwaysLoadFirstElement=false;	// If set true and defaultName left empty, the default displayed element will always be the first one with a "Read More" link.
var autoHideScroll=false;
var largeViewId='large';


var scrollableContainerId='scrollable-container';
var mainListSelector='#timeline';
var elementSelector='li.showcased-element';
var elementHeadingSelector='h2';
var thumbnailClass='thumbnail';
var readMoreCssClass='readmore';
var anchoredElements=$$(mainListSelector+' .'+readMoreCssClass);
var drop = $(largeViewId);

//flashes the element received as a parameter
function flashOnce(someElement) {
	/**/
	var someElementFx = someElement.effect('background-color', {wait: false}); // wait is needed to toggle the effect
	someElementFx.start('ccd5e3').chain(someElementFx.start.pass('ffffff', someElementFx));
	/**/
}

//gets 'simple-title' from an element like <h2>"Simple" Title</h2>
function innerTextToAnchorName(someElement) {
	title=	someElement.innerHTML.toLowerCase();
	while	(title.indexOf(" ") > -1)		title = title.replace(" ","-");
	while	(title.indexOf("#") > -1)		title = title.replace("#","");
	while	(title.indexOf("&amp;") > -1)	title = title.replace("&amp;","");
	while	(title.indexOf("&lt;") > -1)	title = title.replace("&lt;","");
	while	(title.indexOf("&gt;") > -1)	title = title.replace("&gt;","");
	while	(title.indexOf("&quot;") > -1)	title = title.replace("&quot;","");
	return	title;
}





window.addEvent('domready', function()
{
	$$('.js-disabled').each(function(item)		{ item.style.display='none'; });
	$$('.portfolio-info').each(function(item)	{ item.style.display='block'; });
	
	$(scrollableContainerId).style.left='auto';
	
	// For each anchor link, get the text from its heading and set it as a href (internal link).
	anchoredElements.each(function(el,i)  {
		var title = innerTextToAnchorName(el.getParent(elementSelector).getChildren(elementHeadingSelector)[0]);
		el.href='#' + title;
		//if there's a hash value in the url and it matches any of the elements, display it in large view
		if (location.hash.substring(1, location.hash.length) == title) {
			defaultName = location.hash.substring(1, location.hash.length);
			//TO DO: scroll the div so that the active element is in the middle
		}
	});
	
	//if alwaysLoadFirstElement is set true, set the default name to the first element wchich has a "Read More" link
	if (alwaysLoadFirstElement && defaultName=='') defaultName=innerTextToAnchorName($$(mainListSelector+' .'+readMoreCssClass)[0].getParent(elementSelector).getChildren(elementHeadingSelector)[0]);
	
	if (defaultName!='' ) {
		// Set the default loaded element (this can be received in the hash of the address)
		drop.removeEvents();
		drop.empty();
		var a=null;
		$$(elementSelector+' '+elementHeadingSelector).each(function(item,i){
			var title = innerTextToAnchorName(item);
			if(title==defaultName) a=item.getParent(elementSelector).clone();
		});
		if (a) { 
			drop.innerHTML='';
			a.getChildren().each(function(item,i){
			if (item.hasClass(thumbnailClass)) {
				item.onclick=function(){
					return Slimbox.open(item.href, item.getParent().getChildren(elementHeadingSelector)[0].innerHTML);
				};
			}
				if (!item.hasClass(readMoreCssClass)) item.inject(drop);	
				//alert(!item.hasClass(readMoreCssClass));
			});
			flashOnce(drop);
			var myFx = new Fx.Scroll(window).toElement('large-view');
		}
	}

	anchoredElements.each(function(item, i)	{
		item.addEvent('click', function(e)
		{
			drop.removeEvents();
			drop.empty();
			var b = item.getParent(elementSelector).clone();
			drop.innerHTML='';
			b.getChildren().each(function(item,i){
				/**/
				if (item.hasClass(thumbnailClass)) {
					item.onclick=function(){
						return Slimbox.open(item.href, item.getParent().getChildren(elementHeadingSelector)[0].innerHTML);
					};
				}
				/**/
				if (!item.hasClass(readMoreCssClass)) item.inject(drop);	
			});
			flashOnce(drop);
			var myFx = new Fx.Scroll(window).toElement('large-view');
		});
	});

	var count;
	//Alternates class names for the li elements
	$$(mainListSelector+' '+elementSelector).each(function(el,i){
		var cssClass = i % 2 ? 'even' : 'odd' ;
		el.addClass(cssClass);
		count=i+1;
	});

	//Sets the width of the div inside the scrollable one (fixed width is needed there). This depends on the number of elements
	count=count*197+190;
	var width=count+'px';
	$$(mainListSelector)[0].setStyle('width', width );

	//Horizontal auto-scroller
	var scroll2 = new Scroller(scrollableContainerId, {area: 100, velocity: 0.5});
	$(scrollableContainerId).addEvent('mouseenter', scroll2.start.bind(scroll2));
	$(scrollableContainerId).addEvent('mouseleave', scroll2.stop.bind(scroll2));
	/**/

});