if( window.location.href.indexOf("localhost") > -1 ) {
	var REMOTE_BASE = "http://localhost/_clients/papa/deploy/02_site/www/";
}else{
	var REMOTE_BASE = "http://www.papaprojects.com/";
}


function papaLogo()
{
	$("logo").setStyle( "background-position", "25px 33px" );
}

window.addEvent( "domready", initPapa  );



/*
 * TODO: ext links on anchors
 * TODO: dispose image when updating detail panel
 */
function initPapa()
{
	var s = getCurrentSite();
	if( s.indexOf( "casestudies/Detail" ) > -1 ) {
		s = "detail";
	}
	switch( s )
	{
		case "index" :
			new PapaShowcase(false);
			break;
		case "detail" :
			new PapaShowcase( true );
			$("logo").setStyles( {width:"148px", height:"68px"} );
			break;
		case "whitepapers" :
			new PapaWhitepapers(false);
			break;
		default: 
			$("logo").setStyles( {width:"148px", height:"68px"} );
			break;
	}
	
	new PapaFooter();
}


var PapaFooter = new Class
({
	fT:null,
	f:null,
	initialize: function()
	{
		this.fT = $("footer").getElement(".c");
		this.f = $("footer");
		this.fT.addEvent( "mouseenter", this.enterL.bind(this) );
		this.fT.addEvent( "mouseleave", this.leaveL.bind(this) );
	},
	enterL: function()
	{
		this.f.addClass("over");
	},
	leaveL: function()
	{
		this.f.removeClass("over");
	}
});


var PapaShowcaseDetail = new Class
({
	Binds: [ "clickListener" ],
	Implements: [ Events ],
	coreElem: null,
	data: null,
	btnClose: null,
	btnLeft:null,
	btnRight: null,
	imageHolder:null,
	image: null,
	title: null,
	text: null,
	prevNextHoverText:null,
	imageSet: null,
	gallery:null,
	isDetail:false,
	pdfLink:null,
	
	initialize: function( isDetail, targetToken )
	{
		this.isDetail = isDetail;
		this.coreElem = $("scDetail");
		this.imageHolder = $("scDetImg");
		this.image = this.imageHolder.getElement("img");
		this.title = $("scDetCaptT");
		this.text = $("scDetDesc");
		this.prevNextHoverText = $("scDetPeekText").set( "opacity", 0 );
		this.btnClose = $("scDetClose");
		this.btnLeft = $("scDetContLeft");
		this.btnRight = $("scDetContRight");
		if( $chk( $("scDetPdfLink") ) ) {
			this.pdfLink = $("scDetPdfLink");
		}
		this.gallery = new PapaShowcaseDetailGallery( $("scDetGallery"), targetToken );
		
		if( !isDetail ) {
			this.image.set( "opacity", 0 );
		}else{
			//this.btnClose.setStyle( "display", "none" );
		}
		
		this.btnLeft.addEvent( "click", this.clickLeftListener.bind( this ) );
		this.btnRight.addEvent( "click", this.clickRightListener.bind( this ) );
		this.btnLeft.addEvent( "mouseenter", this.hoverLeftListener.bind( this ) );
		this.btnRight.addEvent( "mouseenter", this.hoverRightListener.bind( this ) );
		this.btnLeft.addEvent( "mouseleave", this.leaveLeftListener.bind( this ) );
		this.btnRight.addEvent( "mouseleave", this.leaveRightListener.bind( this ) );
	},
	
	update: function( data, bypassData )
	{
		if( !bypassData ) {
			this.data = data;
			var strPos = String( data.pos ).length < 2 ? "0" + data.pos : data.pos;
			strPos = strPos + ".<br />";
			this.title.set( "html", strPos  + data.title ); // TODO: uncomment
			$("scDetDescP").set( "html", data.text );
			this.text.getElement( "img" ).set( "src", data.image_logo );
			this.prevNextHoverText.set( "opacity", 0 );
			if( this.pdfLink && $chk( data.pdf ) ) {
				this.pdfLink.set( "href", data.pdf );
				this.pdfLink.setStyle( "display", "block" );
			}else{
				if( !$chk( data.pdf ) && this.pdfLink ) {
					this.pdfLink.setStyle( "display", "none" );
				}
			}
			Cufon.replace( "#scDetCaptT" );
			
			
			$("scDetDescP").getElements("a").each( function( el ) {
				if( el.get("href").indexOf( REMOTE_BASE ) < 0 ) {
					el.set( "target", "_blank" );
				}
			});
			
			this.gallery.update( data );
			this.show();
			
		}else{
			this.gallery.update( data, true );
			Cufon.replace( "#scDetCaptT" );
			this.prevNextHoverText.set( "opacity", 0 );
		}
		this.btnClose.addEvent( "click", this.clickCloseListener.bind( this ) );
		this.gallery.activateBehaviour();
	},

	
	show: function()
	{
		this.coreElem.set( "opacity", 0 );
		this.coreElem.setStyle( "display", "block" ); 
		this.coreElem.get( "tween", { property:"opacity", duration:800, transition: Fx.Transitions.linear.easeOut } ).start( 1 );
	},
	
	hide: function()
	{
		this.coreElem.get( "tween", { property:"opacity", duration:600, onComplete: this.hideCompleteListener.bind( this ), transition: Fx.Transitions.linear.easeOut } ).start( 0 );
		this.gallery.disposeBehaviour();
	},
	
	updatePrevNextPeek: function( t )
	{
		this.prevNextHoverText.getElement( "span" ).set( "html", t );
	},
	

	// ########## LISTENERS #####################
	clickCloseListener: function( e )
	{
		this.btnClose.removeEvents( "click" );
		if( this.isDetail ) {
			window.location.href = REMOTE_BASE;
		}else{
			this.hide();
		}
		
	},
	
	hideCompleteListener: function()
	{
		this.coreElem.setStyle( "display", "none" );
		this.fireEvent( "hideComplete" );
		this.gallery.disposeVisuals();
	},
	clickLeftListener: function( e )
	{
		this.fireEvent( "requestPreviousItem" );
	},
	clickRightListener: function( e )
	{
		this.fireEvent( "requestNextItem" );
	},
	hoverLeftListener: function()
	{
		var t = this.data.previousItem.title.replace( /<br\s*\/?>/g, " " );
		this.updatePrevNextPeek(t);
		this.prevNextHoverText.setStyle( "visibility", "visible" );
		this.prevNextHoverText.fade( "in" );
	},
	hoverRightListener: function()
	{
		var t = this.data.nextItem.title.replace( /<br\s*\/?>/g, " " );
		this.updatePrevNextPeek(t);
		this.prevNextHoverText.setStyle( "visibility", "visible" );
		this.prevNextHoverText.fade( "in" );
		
	},
	leaveLeftListener: function()
	{
		this.prevNextHoverText.fade("out");
	},
	leaveRightListener: function()
	{
		this.prevNextHoverText.fade("out");
	}
	
});


var PapaShowcaseDetailGallery = new Class
({
	SLIDE_INTERVAL: 4000,
	data:null,
	currentPos: -1,
	imageHolder: null,
	controlShell: null,
	cPrev: null,
	cNext: null,
	cPlayPause: null,
	image: null,
	mMoveActivateClosure: null,
	mMoveDeactivateClosure: null,
	hI: null, // interval for hiding image
	slideI: null, // slide interval
	loadedAssets: null,
	imgId: null,
	lastY:-1,
	playBtnState:0, // 0 = pause, 1 = play
	useSlideShow: false,
	targetToken:null,
	
	
	initialize: function( targetToken )
	{
		targetToken = getRequestedModule();
		this.targetToken = targetToken == "whitepapers" ? "whitepapers" : "showcase";
		this.imageHolder = $("scDetImg");
		this.referenceAndInitView();
		this.setupBehaviouralClosures();
	},
	
	update: function( data, bypass )
	{
		this.disposeVisuals();
		this.stopSlide();
		this.data = data;
		this.loadedAssets = new Array( data.length );
		if( !bypass ) {
			this.next();
		}else{
			++this.currentPos;
		}
		if( this.data.imageSet.length < 2 || !this.data.imageSet.length ) {
			this.hideControlShell();
			this.useSlideShow = false;
		}else{
			this.showControlShell();
			this.useSlideShow = true;
		}
	},
	
	next: function()
	{
		++this.currentPos;
		if( this.currentPos > this.data.imageSet.length - 1 ) this.currentPos = 0;
		this.loadImage();
	},
	
	prev: function()
	{
		--this.currentPos;
		if( this.currentPos < 0 ) this.currentPos = this.data.imageSet.length - 1;
		this.loadImage();
	},
	
	startSlide: function()
	{
		this.stopSlide();
		this.slideI = this.next.periodical( this.SLIDE_INTERVAL, this );
		this.cPlayPause.getElement(".arrow").setStyle( "background-position", "-32px" ); 
		this.playBtnState = 0;
	},
	
	stopSlide: function()
	{
		if( this.slideI ) {
			$clear( this.slideI );
		}
		this.cPlayPause.getElement(".arrow").setStyle( "background-position", "-19px" ); 
		this.playBtnState = 1;
	},
	
	
	// ################# PRIVATES ########################################
	loadImage: function()
	{
		new Asset.image( REMOTE_BASE + "images/"+this.targetToken+"/large/" + this.getCurrentImageURL(), { id:"scDetImageInner", onload: this.imageLoadedListener.bind( this ) } );
	},
	
	getCurrentImageURL: function()
	{
		return this.data.imageSet[ this.currentPos ];
	},
	
	hideControlShell: function()
	{
		this.controlShell.setStyle( "display", "none" );
	},
	
	showControlShell: function()
	{
		this.controlShell.setStyle( "display", "block" );
	},
	
	referenceAndInitView: function()
	{
		this.controlShell = $("scDetGalControls");
		this.cPrev = $("scDetGalContPrev");
		this.cNext = $("scDetGalContNext");
		this.cPlayPause = $("scDetGalContPlayPause");
		
		this.controlShell.tween( "opacity", 1 );
		this.cPrev.getElement(".bg").set( "opacity", .7 );
		this.cNext.getElement(".bg").set( "opacity", .7 );
		this.cPlayPause.getElement(".bg").set( "opacity", .7 );
	},
	setupBehaviouralClosures: function()
	{
		this.mMoveActivateClosure =  this.mouseMoveActivateListener.bindWithEvent( this );
		this.mMoveDeactivateClosure = this.mouseMoveDeactivateListener.bindWithEvent( this );
	},
	activateBehaviour: function()
	{
		this.imageHolder.removeEvents("mousemove").addEvent( "mousemove", this.mMoveActivateClosure );
		this.imageHolder.removeEvents("mouseleave").addEvent( "mouseleave", this.leaveImageAreaListener.bindWithEvent( this ) );
		this.cPrev.removeEvents("click").addEvent( "click", this.clickPrevListener.bind( this ) );
		this.cNext.removeEvents("click").addEvent( "click", this.clickNextListener.bind( this ) );
		this.cPlayPause.removeEvents("click").addEvent( "click", this.clickPlayPauseListener.bind( this ) );
		this.cPrev.removeEvents("mouseenter").addEvent( "mouseenter", this.mouseHoverListener.bindWithEvent( this ) );
		this.cNext.removeEvents("mouseenter").addEvent( "mouseenter", this.mouseHoverListener.bindWithEvent( this ) );
		this.cPlayPause.removeEvents("mouseenter").addEvent( "mouseenter", this.mouseHoverListener.bindWithEvent( this ) );
	},
	deactivateBehaviour: function()
	{
		this.imageHolder.removeEvents( "mouseleave" );
		this.imageHolder.removeEvent( "mousemove", this.mMoveActivateClosure );
		this.imageHolder.removeEvent( "mousemove", this.mMoveDeactivateClosure );
		this.cNext.removeEvents( "click" );
		this.cPrev.removeEvents( "click" );
		this.cPlayPause.removeEvents( "click" );
		this.cPrev.removeEvents( "mouseenter" );
		this.cNext.removeEvents( "mouseenter" );
		this.cPlayPause.removeEvents( "mouseenter" );
	},
	disposeBehaviour: function()
	{
		this.deactivateBehaviour();
		this.stopSlide();
	},
	disposeVisuals: function()
	{
		if( $chk( $("scDetImageInner" ) ) ) {
			$("scDetImageInner" ).dispose();
		}
	},
	
	hideControlsDelayed: function()
	{
		if( this.hI ){
			$clear( this.hI );
		}
		this.hI = this.hideControls.delay( 2000, this );
	},
	
	hideControls: function()
	{
		if( !Browser.Engine.trident ) {
			this.controlShell.tween( "opacity", 0 );
		}else{
			this.controlShell.tween( "opacity", 0 );
			this.controlShell.getElements( ".bg" ).tween( "opacity",  0 );
			this.controlShell.getElements( ".arrow" ).tween( "opacity",  0 );
		}
	},
	
	
	
	
	
	/// ##### LISTENERS ##############################################################
	
	leaveImageAreaListener: function( e )
	{
		if( this.hI ){
			$clear( this.hI );
		}
		if( e.client.y > 383 || e.client.x > 497 || e.client.x < 50 ) {
			this.imageHolder.removeEvent( "mousemove", this.mMoveDeactivateClosure );
			this.imageHolder.addEvent( "mousemove", this.mMoveActivateClosure );
			this.hideControls();
		}
	},
	
	mouseMoveActivateListener: function( e )
	{
		if( e.client.y > 310 ) {
			if( this.hI ) $clear( this.hI );
			this.imageHolder.removeEvent( "mousemove", this.mMoveActivateClosure );
			this.controlShell.setStyle( "visibility", "visible" );
			this.controlShell.tween( "opacity", 1 );
			if( Browser.Engine.trident ) {
				this.controlShell.getElements( ".bg" ).tween( "opacity",  .7 );
				this.controlShell.getElements( ".arrow" ).tween( "opacity",  1 );
			}
			this.imageHolder.addEvent( "mousemove", this.mMoveDeactivateClosure );
		}else{
			
		}
		this.lastY = e.client.y;
	},
	
	mouseMoveDeactivateListener: function( e )
	{
		if( e.client.y < 300 || e.client.y > 383 ) {
			if( this.hI ) $clear( this.hI );
			this.imageHolder.removeEvent( "mousemove", this.mMoveDeactivateClosure );
			this.imageHolder.addEvent( "mousemove", this.mMoveActivateClosure );
			this.hideControls();
		}
		this.lastY = e.client.y;
	},
	
	clickPrevListener: function()
	{
		this.prev();
		this.stopSlide();
	},
	
	clickNextListener: function()
	{
		this.next();
		this.stopSlide();
	},
	
	clickPlayPauseListener: function()
	{
		// pause
		if( this.playBtnState == 0 ) {
			this.stopSlide();
		// play
		}else {
			this.startSlide();
		}
	},
	
	mouseHoverListener: function( e )
	{
		$( e.target ).getParent().getElement(".bg").highlight( "#ffffff" );
	},
	
	mouseLeaveListener: function( e )
	{
	
	},
	imageLoadedListener: function( img )
	{
		if( $chk( $("scDetImageInner" ) ) ) {
			$("scDetImageInner" ).dispose();
		}
		this.imageHolder.adopt( img );
		img.set( "opacity", 0 ).tween( "opacity", 1 );
		
		if( this.lastY < 300 ) {
			this.hideControlsDelayed();
		}
		if( this.useSlideShow  ) {
			this.startSlide();
		}
		
	}
});



var PapaShowcase = new Class
({
	GRID_ITEM_COUNT: -1,
	logoFlash:null,
	gridIntro: null,
	grid: null,
	detailLayer:null,
	data: null,
	currentItemPos:-1,
	currentItemData:null,
	isDetail:false,
	targetToken:"casestudies",
	
	initialize: function( isDetail )
	{
		this.targetToken = getRequestedModule();
		this.isDetail = isDetail;
		this.gridIntro = new PapaShowcaseIntro( this.GRID_ITEM_COUNT );
		this.detailLayer = new PapaShowcaseDetail( isDetail, this.targetToken );
		this.grid = new PapaShowcaseGrid( this.detailLayer );
		
		this.gridIntro.addEvent( "introReady", this.introReadyHandler.bind( this ) );
		this.grid.addEvent( "gridItemClicked", this.gridItemClickedListener.bind( this ) );
		this.detailLayer.addEvent( "requestPreviousItem", this.requestPreviousItemListener.bind( this ) );
		this.detailLayer.addEvent( "requestNextItem", this.requestNextItemListener.bind( this ) );
		
		var s = new Swiff2();
		var id = "logo";
		var ref = this;
		var version = s.getVersionDetails();
	
		if( version === 0 ) {
			this.logoCompleteHandler();
		}else{
			if( getCurrentSite() == "index" ) {
				var visitedHome = Cookie.read( "vh" );
				if( !$chk( visitedHome ) ) {
					Cookie.write( "vh", 1, {path:"/", duration:0 } );
					var params = {
							swLiveConnect: false,
							allowScriptAccess: "always",
							wMode: "window"
						};
					var fVars = {
						
					};
					
					this.logoFlash = new Swiff
					(
						"swf/intro.swf",
						{
							id: "fl-navigation",
							width: "100%",
							height: "100%",
							params: params,
							vars: fVars,
							container: $(id),
							callBacks: {
								onLoad: ref.logoCompleteHandler.bind( ref )
							}
						}
					);
				}else{
					papaLogo();
					this.logoCompleteHandler();
				}
			}
		}
		
		//var r = new Request.JSON( {url:REMOTE_BASE + "casestudies", onComplete: this.ajaxResHandler.bindWithEvent( this ) } ).post();
		var r = new Request( {method:"post", url:REMOTE_BASE + this.targetToken, onComplete: this.ajaxResHandler.bindWithEvent( this ) } ).send();
		//var r = new Request.JSON( {url:REMOTE_BASE + this.targetToken, onComplete: this.ajaxResHandler.bindWithEvent( this ) } ).post();
		
		
	},
	
	getDataItemByPos:function ( pos )
	{
		var data = this.data[ pos ];
		var prevData;
		var nextData;
		switch( pos )
		{
			case 0 :
				prevData = this.data[ this.data.length - 1 ];
				nextData = this.data[ 1 ];
				break;
				
			case this.data.length - 1 :
				prevData = this.data[ this.data.length - 2 ];
				nextData = this.data[ 0 ];
				break;
				
			default:
				prevData = this.data[ pos - 1 ];
				nextData = this.data[ pos + 1 ];
				break;
		}
		data.previousItem = prevData;
		data.nextItem = nextData;
		
		return data;
	},
	
	
	// ################# LISTENERS ####################################
	logoCompleteHandler: function()
	{
		$("logo").setStyles( { width:"140px", height:"68px" } );
		this.gridIntro.show();
		
	},
	introReadyHandler: function()
	{
		this.grid.show();
	},
	
	ajaxResHandler: function( res )
	{
		res = JSON.decode( res );

		this.data = res;
		
		this.GRID_ITEM_COUNT = this.data.length;
		
		if( this.isDetail ) {
			
			var pos = DET_POS - 1;
			var id = DET_ID;
			var nicename = DET_NICENAME;
			
			var data = this.getDataItemByPos(pos);
			data.pos = pos + 1;
			data.id = id;
			data.nicename = nicename;
			
			this.detailLayer.update( data, true );
			
			this.currentItemPos = pos;
			this.currentItemData = data;
		}else{
			if( this.targetToken == "whitepapers" ) {
				this.logoCompleteHandler();
			}
		}
		
	},
	
	gridItemClickedListener: function( eventData )
	{
		if( !this.data ) {
			return;
		}
		var pos = parseInt( eventData.pos ) - 1;
		var id = eventData.id;
		var nicename = eventData.nicename;
		
		var data = this.getDataItemByPos(pos);
		data.pos = pos + 1;
		data.id = id;
		data.nicename = nicename;
		
		this.detailLayer.update( data );
		
		this.currentItemPos = pos;
		this.currentItemData = data;
	},
	
	requestPreviousItemListener: function()
	{
		var p = this.currentItemPos;
		var d = this.data;
		var pNew = null;
		switch( p )
		{
			case 0 :
				pNew = d.length - 1;
				break;
				
			default:
				pNew = p - 1;
				break;
		
		}
		this.currentItemPos = pNew;
		var data = this.getDataItemByPos( this.currentItemPos );
		data.pos = this.currentItemPos + 1;
		this.currentItemData = data;
		this.detailLayer.update( data );
	},
	
	
	requestNextItemListener: function()
	{
		var p = this.currentItemPos;
		var d = this.data;
		var pNew = null;
		switch( p )
		{
		
			case d.length - 1 :
				pNew = 0;
				break;
				
				
			default:
				pNew = p + 1;
				break;
		
		}
		this.currentItemPos = pNew;
		var data = this.getDataItemByPos( this.currentItemPos );
		data.pos = this.currentItemPos + 1;
		this.currentItemData = data;
		this.detailLayer.update( data );
	}

});

var PapaWhitepapers = new Class
({
	Extends: PapaShowcase,
	targetToken:"whitepapers",
	
	
	initialize: function()
	{
		this.parent();
	}	
});


var PapaShowcaseIntro = new Class
({
	BUILD_SPEED: 150,
	PATTERN_HOR_ZICK: 0,
	PATTERN_VERT_ZICK: 1,
	
	Implements: [ Events ],
	grid: null,
	itemCount: null,
	origItemList: null,
	patternList: null,
	pongList: null,
	colorTargets: null,
	
	
	initialize: function( itemCount )
	{
		
		this.itemCount = itemCount;
		this.grid = $( "scIntroGrid" );
		this.origItemList = this.grid.getElements( "li" );
		this.pongList = [];
		this.generateColorTargets();
		//return; // TODO comment out
		this.generatePatternList();
	},
	generateColorTargets: function()
	{
		this.colorTargets = [
		                      "#555594", "#A8A8D2", "#6A629A", "#9AA1C4", "#B19DCB",
		                      "#9880B5", "#99A4C7", "#B19DCB", "#868DAB", "#BBAFCB",
		                      "#99A4C7", "#A8A8D2", "#BABAE8", "#6A629A", "#99A4C7"
		                     ];
		for( var i=0; i<15; i++ )
		{
			this.origItemList[ i ].setStyle( "background-color", this.colorTargets[ i ] );
		}
	},
	generatePatternList: function()
	{
		this.patternList = [];
		
	
		var patternHorZack = [ 0, 1, 2, 3, 4, 
		                       9, 8, 7, 6, 5,
		                       10, 11, 12, 13, 14
		                       ];
		
		var patternVertZick = [ 0, 5, 10,
		                       	11, 6, 1,
		                       	2, 7, 12,
		                       	13, 8, 3,
		                       	4, 9 , 14
		                       ];
		
		
		this.patternList.push( patternHorZack );
		this.patternList.push( patternVertZick );
		
	},
	show: function()
	{
		var i = 0;
		this.grid.setStyle( "display", "block" );
		var pattern = this.patternList[ parseInt( Math.random() * (this.patternList.length) ) ];
		for( var i=0; i<15; i++ )
		{
			var el = this.origItemList[ pattern[ i ] ];
			var pong = new FadePongItem( el );
			this.pongList.push( pong );
			this.fireField.delay( i * this.BUILD_SPEED, this, [ pong ] );
		}
		pong.addEvent( "pongComplete", this.gridAnimCompleteListener.bind( this ) );
	},
	fireField: function( pong )
	{
		pong.start();
	},
	
	
	gridAnimCompleteListener: function()
	{
		this.origItemList = null;
		this.patternList = null;
		this.pongList.each( function( it ) 
			{
				it.removeEvent( "pongComplete", this.gridAnimCompleteListener );
				it = null;
			}.bind( this )
		);
		this.fireEvent( "introReady" );
		
	}
});


var FadePongItem = new Class
({
	Implements: [ Events ],
	Binds: [ "fadeForthCompleteListener", "fadeBackCompleteListener" ],
	el: null,
	
	initialize: function( el )
	{
		this.el = el;
		this.el.setStyle( "visibility", "visible" );
		this.el.set( "opacity", 0 );
	},
	
	start: function()
	{
		this.el.get( "tween", { property: "opacity", onComplete:this.fadeForthCompleteListener, duration:300  } ).start(1);
	},
	
	fadeForthCompleteListener: function()
	{
		this.el.get( "tween", { property: "opacity", onComplete:this.fadeBackCompleteListener, duration:1000  } ).start(0);
	},
	
	fadeBackCompleteListener: function()
	{
		this.fireEvent( "pongComplete" );
	}
	
});


var PapaShowcaseGrid = new Class
({
	Implements: [ Events ],
	grid: null,
	detailLayer:null,
	introGrid: null,
	hoverTween: null,
	outTween: null,
	blindFields:null,
	itemIdleAlpha:0, // TODO set to 0.01
	
	initialize: function( detailLayer )
	{
		if( Browser.Engine.trident ) {
			this.itemIdleAlpha = 0.01;
		}
		this.detailLayer = detailLayer;
		this.detailLayer.addEvent( "hideComplete", this.detailLayerHideCompleteListener.bind( this ) );
		this.grid = $("scGrid");
		this.introGrid = $("scIntroGrid");
		this.blindFields = [];
		this.grid.getElements(".blind").each( function( el ) {
			el.setStyle( "visibility", "visible" ).set( "opacity", 0.01 );
			this.blindFields.push( el );
		}.bind(this));
	},

	
	show: function()
	{
		this.grid.setStyle( "display", "block" );
		this.activateBehaviour();
	},
	
	
	activateBehaviour: function()
	{
		this.grid.getElements( ".anc" ).each( function( el ) {
			el.setStyle("display", "block" );
			el.store( "clazz", this );
			var li = el.getParent( "li" );
			if( !Browser.Engine.trident ) {
				li.setStyle( "visibility", "visible" );
				el.getParent( "li" ).getElement( ".overlay" ).set( "opacity",  Browser.Engine.trident ? 0.01 : 0 );
			}else{
				li.getElement( ".iterator" ).setStyle( "visibility", "hidden" );
				li.getElement( ".cap" ).setStyle( "visibility", "hidden" );
			}
			
			
			li.set( "opacity", 0 );
			li.get( "tween", {property:"opacity", duration:1500}).start(this.itemIdleAlpha);
			

			el.store( "li", li );
			el.addEvent( "mouseenter", this.hoverListener );
			el.addEvent( "mouseleave", this.outListener );
			el.addEvent( "click", this.clickListener.bind( this ) );
		}.bind( this ) ); 
		
		
		this.blindFields.each( function( el ) {
			el.addEvent( "mouseenter", this.enterBlindListener );
			el.addEvent( "mouseleave", this.leaveBlindListener );
		}.bind(this));

	},
	
	deactivateBehaviour: function()
	{
		this.grid.getElements( ".anc" ).each( function( el ) {
			el.setStyle( "display", "none" );
			el.removeEvents( "click" );
			el.removeEvents( "mouseenter" );
			el.removeEvents( "mouseleave" );
		});
		this.blindFields.each( function( el ) {
			el.addEvents( "mouseenter" );
			el.addEvents( "mouseleave" );
		});
	},
	
	dimDown: function( activeEl )
	{
		this.deactivateBehaviour();
		if( !Browser.Engine.trident ) {
			this.grid.tween( "opacity", 0 );
		}else{
			this.grid.set( "opacity", 0.01 );
		}
		
	},
	
	dimUp: function()
	{
		this.activateBehaviour();
		this.grid.tween( "opacity", 1 );
	},
	
	// LISTENERS ============================================================================================================
	enterBlindListener: function( e )
	{
		this.get( "tween", {property:"opacity", duration:250 } ).start(1);
	},
	leaveBlindListener: function( e )
	{
		this.get( "tween", {property:"opacity", duration:1000 } ).start(0.01);
	},
	
	hoverListener: function()
	{
		var ref = this.retrieve( "clazz" );
		var li = this.retrieve( "li" );
		li.get( "tween", {property: "opacity", duration:200, transition: Fx.Transitions.linear.easeOut } ).start( 1 );
		li.getElement( ".overlay" ).setStyle( "visibility", "visible" );
		if( !Browser.Engine.trident ) {
			li.getElement( ".overlay" ).get( "tween", {property: "opacity", duration:1300 } ).start( 1 );
		}else{
			//li.getElement( ".overlay" ).set("opacity", 1);
			//li.getElement( ".iterator" ).setStyle( "visibility", "visible" );
			//li.getElement( ".cap" ).setStyle( "visibility", "visible" );
		}
	},
	outListener: function()
	{
		var ref = this.retrieve( "clazz" );
		var li = this.retrieve( "li" );
		li.get( "tween", {property: "opacity", duration:700, transition: Fx.Transitions.linear.easeOut } ).start(  Browser.Engine.trident ? 0.01 : 0 ); // TODO set to 0.01
		if( !Browser.Engine.trident ) {
			li.getElement( ".overlay" ).get( "tween", {property: "opacity", duration:300 } ).start( ref.itemIdleAlpha );
		}else{
			//li.getElement( ".overlay" ).set( "opacity", 0.01);
			//li.getElement( ".overlay" ).setStyle( "visibility", "hidden" );
			//li.getElement( ".iterator" ).setStyle( "visibility", "hidden" );
		//	li.getElement( ".cap" ).setStyle( "visibility", "hidden" );
		}
	},
	clickListener: function( e )
	{
		new Event( e ).stop();
		var el = $( e.target );
		var a = el.getParent("a");
		var nicename = a.get("href").match(/\/([^\/]+)\.html$/)[1];
		var idSet = a.get( "id" ).match( /^i_(\d+)_(\d+)/, "" );
		var id = idSet[1];
		var pos = idSet[2];
		this.dimDown( el );
		this.fireEvent( "gridItemClicked", { id: id, pos: pos, nicename: nicename } );
	},


	detailLayerHideCompleteListener : function()
	{
		this.dimUp();
	}
	
});






function getRequestedModule()
{
	var loc = window.location;
	loc = loc.toString().replace( /%2D/g, "-" );
	loc = loc.toString().replace( REMOTE_BASE, "" );
	loc = loc.toString().replace( /^en\/?/, "" );
	loc = loc.toString().replace(/index.php/, "");
	var r = new RegExp( "^[^\/\?]+", "i" );
	var res = r.exec( loc );
	return !res ? "casestudies" : String( res ).trim();
}