if( !ui ) {
	/**$ @namespace */
	var ui = {};
}
ui.Base = new Class
({
	_element:null,


	getSize: function()
	{
		return this._element.getSize();
	},

	getDomElement: function()
	{
		return this._element;
	}
	
});


ui.GridCanvas = new Class
({
	Implements:[Events],
	items: null,
	hoverBoard:null,
	itemLeaveInterval:null,

	initialize: function()
	{
		this._element = document.id( "gridCanvas" );
		this.items = [];
		this.hoverBoard = document.id("labelboardMaster");
		this._element.inject( document.body, "top" );
	},
	injectImage: function( image, tileId )
	{
		var gridItem = new ui.GridItem( image, tileId );
		this.items.push( gridItem );
	},
	show: function()
	{
		var c = 0;
		this.items.each( function( el ) {
			el.show.delay( c * SyConfig.gridImageFadeInterval, el);
			c++;
		}.bind(this));
		this.notifyDelayedShowFinish.delay( (c-1) * SyConfig.gridImageFadeInterval + SyConfig.gridImageFadeDuration, this );
	},
	dispose: function()
	{
		//d("ui.GridCanvas::dispose()");
		this.hoverBoard = null;
		this.items.each( function( item ) {
			item.removeEvents( "hoverTile" );
			item.removeEvents( "leaveTile" );
			item.removeEvents( "requestCasestudy" );
			item.dispose();
			item = null;
		});
	},
	hide: function()
	{
		var c = 0;
		var tmp = [];
		this.items.each( function( el ) {
			tmp.push( el );
		});
		tmp.reverse();
		tmp.each( function( el ) {
			el.hide.delay( c * 100, el);
			c++;
		}.bind(this));
		this.notifyDelayedHideFinish.delay( (c-1) * 100 + SyConfig.gridImageFadeDuration, this );
	},
	notifyDelayedShowFinish: function()
	{
		this.activateItemsDelayed.delay( 1200, this );
		this.activateItemsDelayed0.delay( 1000, this );
		this.fireEvent( EventList.GRID_READY );
	},
	activateItemsDelayed0: function()
	{
		this.items.each( function( item ) {
			if( item.getDomElement().hasClass( "trigger" ) ) {
				item.setBehaviour();
			}
		}.bind(this));
	},
	activateItemsDelayed: function()
	{
		this.items.each( function( item ) {
			if( item.getDomElement().hasClass( "trigger" ) ) {
				item.addEvent( "hoverTile",this.tileHoverListener.bind(this) );
				item.addEvent( "leaveTile",this.tileLeaveListener.bind(this) );
				item.addEvent( "requestCasestudy", this.requestCaseStudyListener.bind(this) );
				//item.getDomElement().setStyle( "cursor", "pointer" );
				item.setBehaviour();
			}
		}.bind(this));
	},
	notifyDelayedHideFinish: function()
	{
		//d("ui.GridCanvas::notifyDelayedHideFinish()");
		document.id("labelboardMaster").destroy();
	},
	getSize: function()
	{
		return this._element.getSize();
	},

	tileHoverListener: function( tile )
	{
		//d("clear: ", this.itemLeaveInterval )
		$clear( this.itemLeaveInterval );
		var id = tile.get("id");
		this.items.each( function( item ) {
			if( item.getDomElement().get("id") != id ) {
				item.blur();
			}
		}.bind( this ));
		this.fireEvent( "hoverTile", tile );
	},

	tileLeaveListener: function( delayInterval, tile )
	{
		$clear( this.itemLeaveInterval );
		this.itemLeaveInterval = delayInterval;
		var id = tile.get("id");
		this.items.each( function( item ) {
			if( item.getDomElement().get("id") != id ) {
				item.blurBack();
			}
		}.bind( this ));
	},

	requestCaseStudyListener: function( nicename )
	{
		this.fireEvent( "requestCaseStudy", nicename );
	}
});


ui.GridItem = new Class
({
	Implements:[Events],
	hoverBoard:null,
	leaveDelay:null,

	initialize: function( imageEl, tileId )
	{
		var imgWrapper = document.id( tileId );
		imageEl.inject( imgWrapper );
		this._element = imgWrapper;
		this._element.set( "opacity", 0 );
		this._element.setStyle( "display", "block");
		this._element.set( "tween", { duration: SyConfig.gridImageFadeDuration, onComplete: this.tweenCompleteHandler.bind(this) } );
		this.hoverBoard = document.id("labelboardMaster");
		this.hoverBoard.set( "tween", {duration: 250 } );
	},
	show: function()
	{
		this._element.tween( "opacity", 1 );
	},
	hide: function()
	{
		this._element.tween( "opacity", 0 );
	},
	blur: function()
	{
		this._element.tween( "opacity", .5 );
	},
	blurBack: function()
	{
		this._element.tween( "opacity", 1 );
	},
	getDomElement: function()
	{
		return this._element;
	},
	setBehaviour: function()
	{
		if( this._element.hasClass("trigger") ) {
			this._element.addEvent( "mouseenter", this.hoverListener.bind(this) );
			this._element.addEvent( "mouseleave", this.leaveListener.bind(this) );
			this._element.addEvent( "click", this.clickListener.bind(this) );
		}
	},
	dispose: function()
	{
		//d("ui.GridItem::dispose()");
		this._element.removeEvents( "mouseenter" );
		this._element.removeEvents( "mouseleave" );
		this._element.removeEvents( "click" );
	},
	tweenCompleteHandler: function()
	{
		if( this._element.get("opacity") > .9 ) {
			//this.setBehaviour();
		}
	},

	hoverListener: function(e)
	{
		//d("ui.GridItem::hoverListener()" );
		var tile = document.id(e.target).getParent(".tile");
		tile.setStyle( "cursor", "pointer" );
		this.hoverBoard.inject( tile, "top" ).show().set("opacity", 0 ).tween( "opacity", 1 );
		this.fireEvent( "hoverTile", tile );
	},

	leaveListener: function( e )
	{
		//this.hoverBoard.dispose();
		$clear(this.leaveDelay);
		var tile =  document.id(e.target).getParent(".tile");
		tile.setStyle( "cursor", "default" );
		this.leaveDelay = this.hoverBoard.tween.delay( 500, this.hoverBoard, [ "opacity", 0 ] );
		this.fireEvent( "leaveTile", [this.leaveDelay, tile] );
		//d("ui.GridItem::leaveListener()");
	},
	clickListener: function( e )
	{
		var i = this.hoverBoard.getElement( "input[name=triggerHash]" ).get("value");
		if( !i || i == "" ) {
			return;
		}
		this.fireEvent( "requestCasestudy", i );
	}
});


ui.BackgroundImage = new Class
({
	Extends: ui.Base,
	currentScale:null,

	initialize: function()
	{
		this._element = document.id( "backgroundImage" );
	},
	/**
	 * @deprecated
	 * @param cW
	 */
	setWidthScaling: function( cW )
	{
		this._element.setStyle( "width", "100%" );
		this._element.setStyle( "height", "auto" );
		this.currentScale = "width";
	},
	/**
	 * @deprecated
	 * @param cH
	 */
	setHeightScaling: function( cH )
	{
		this._element.setStyle( "width", "auto" );
		this._element.setStyle( "height", "100%" );
		this.currentScale = "height";
	},
	dispose: function()
	{

	}
});

var B = new Class
({

});


ui.Navigation = new Class
({
	Extends: ui.Base,
	logo:null,
	copyline:null,
	navL:null,
	navR:null,
	navWork: null,
	navBlog:null,
	navWorkSub:null,
	navWhy: null,
	navContact:null,
	mainNavPts:null,
	deactivator:null,

	/**
	 * @type Chain
	 */
	chain:null,

	initialize: function()
	{
		this.configureElements();
		this.configureTweens();
		this.configureBehaviour();

		this.chain = new Chain();
		this.chain.chain(
			this.slideDownHeader.bind( this ),
			this.fadeInLogo.bind(this),
			this.fadeInCopyline.bind(this),
			this.fadeInMenu.bind(this)
		);
	},

	setActiveMainPt: function( nicename )
	{
		//d("ui.Navigation::setActiveMainPt()", nicename );
		this.resetMenStates();
		this.mainNavPts.each( function( el ) {
			if( el.getElement("a").get("href").indexOf( nicename ) > -1 ) {
				el.addClass( "active" );
			}
		});
	},

	setActiveWorkSubPt: function( nicename )
	{
		//d("ui.Navigation::setActiveWorkPt()", nicename );
		this.navWorkSub.getElements("li").each( function( li ) {
			li.removeClass("act");
			li.removeClass("hovered");
		});
		this.navWorkSub.getElements("li").each( function( li ) {
			if( li.getElement("a").get("href").indexOf( nicename ) > -1 ) {
				li.addClass( "act" );
				li.addClass("hovered");
			}
		});
	},

	configureElements: function()
	{
		this._element = document.id("navigation");
		if( Browser.Platform.mac ) {
			this._element.setStyle( "height", parseInt( this._element.getStyle( "height" ) + 2 ) );
			document.id("navTwitt").getElement("img").setStyle( "background-position", "3px 2px" );
		}
		this.logo = document.id("logo");
		this.copyline = document.id("navOpening");
		this.navL = document.id("navLeftPart");
		this.navR = document.id("navRightPart");
		this.navWork = document.id("navWork");
		this.navWhy = document.id("navWhy");
		this.navContact = document.id( "navContact");
		this.navBlog = document.id("navBlog");
		this.navWorkSub = this.navWork.getElement("ul");
		this.navWorkSub.setStyle("display", "block");
		this.navSubH = parseInt( this.navWorkSub.getStyle("height") );
		this.navWorkSub.setStyle("display", "none");
		this.deactivator = document.id("navOverlay");

		this.logo.set( "opacity", 0 );
		this.navL.set( "opacity", 0 );
		this.navR.set( "opacity", 0 );
		this.copyline.set( "opacity", 0 );

		this.navWhy.addEvent( "click", this.clickMainListener.bind(this) );
		this.navWork.addEvent( "click", this.clickMainListener.bind(this) );
		this.navContact.addEvent( "click", this.clickMainListener.bind(this) );
		this.navBlog.addEvent( "click", this.clickMainListener.bind(this) );

		this.mainNavPts = [ this.navContact, this.navWhy, this.navWork, this.navBlog ];
	},

	configureBehaviour: function()
	{
		this.navWorkSub.getElements("li a").each( function( li ) {
			li.addEvent( "mouseenter", this.hoverSubListener.bind(this) );
			li.addEvent( "mouseleave", this.leaveSubListener.bind(this) );
		}.bind(this));
	},

	configureTweens: function()
	{
		this._element.set( "tween", { duration:350, onComplete:this.slideDownCompleteHandler.bind(this) } );
		this.logo.set( "tween", { duration:700, onComplete: this.logoFadeCompleteHandler.bind(this) } );
		this.copyline.set( "tween", { duration:700, onComplete: this.copylineFadeCompleteHandler.bind(this ) } );
		this.navR.set( "tween", { onComplete: this.navFadeCompleteHandler.bind(this ) } );
	},

	build: function()
	{
		this.sequence();
	},

	buildQuickly: function()
	{
		this.copyline.setStyle( "display", "none" );
		this.logo.set("opacity", 1);
		this.chain.clearChain();
		this.slideDownHeader();
		this.fadeInMenu.delay( 500, this );
	},

	sequence: function()
	{
		this.chain.callChain();
	},


	slideDownHeader: function()
	{
		this._element.tween( "top", Browser.Platform.win ? 0 : 0 );
	},

	fadeInLogo: function()
	{
		this.logo.tween( "opacity", 1 );
	},

	fadeInCopyline: function()
	{
		this.copyline.tween( "opacity", 1 );
	},

	hideCopyLine: function()
	{
		this.chain.clearChain();
		this.copyline.set( "morph", { duration:400, onComplete:this.hideCopylineCompleteHandler.bind(this) } );
		this.copyline.morph( { opacity:0, height:0, "padding-top":0 } );
		this._element.tween( "top", 0 );
	},

	fadeInMenu: function()
	{
		this.navL.tween( "opacity", 1);
		this.navR.tween( "opacity", 1 );
	},


	showWork: function()
	{
		this.navWorkSub.setStyles( {display: "block", height:1} ).set("opacity", 0).morph( { "opacity":1, height:this.navSubH } );
	},

	hideWork: function()
	{
		this.navWorkSub.morph( { "opacity":0, height:0 } );
	},


	resetMenStates: function()
	{
		d("ui.Navigation::resetMenStates()");
		this.mainNavPts.each( function( el ) {
			el.removeClass( "active" );
		});
	},

	resetSubMenStates : function()
	{
		this.navWorkSub.getElements("li").each( function( el ) {
			el.removeClass( "hovered" );
			el.removeClass( "act" );
		}.bind( this ));
	},


	// HANDLERS
	slideDownCompleteHandler: function()
	{
		this.sequence();
	},

	logoFadeCompleteHandler: function()
	{
		this.sequence();
	},

	copylineFadeCompleteHandler: function()
	{
		this.sequence();
	},

	navFadeCompleteHandler: function()
	{

	},
	hideCopylineCompleteHandler: function()
	{
		this.copyline.setStyle( "display", "none" );
	},

	// LISTENERS
	clickMainListener: function( e )
	{
		var el = $(e.target).getParent(".navPt").addClass( "active" );
		
	},
	hoverSubListener: function( e )
	{
		var el = $(e.target);
		if( el.get("tag") != "li" ) {
			el = el.getParent("li");
		}
		if( el.hasClass( "hovered" ) ) {
			return;
		}
		el.addClass("hovered");
	},
	leaveSubListener: function( e )
	{
		var el = $(e.target);
		if( el.get("tag") != "li" ) {
			el = el.getParent("li");
		}
		if( el.hasClass( "act" ) ) {
			return;
		}
		el.removeClass("hovered");
	}
});



ui.ContentPane = new Class
({
	Implements:[Events],
	//Extends: ui.Base,

	fx: null,

	contentWhy:null,
	contentMedia:null,
	contentNoMedia:null,
	contentContact:null,

	contentProxied:null,

	initialize: function()
	{
		this._element = document.id("contentMask");
		this._element.setStyle( "display", "block" );
		this._element.set( "tween", {duration:200} );
		this.contentWhy = document.id("contentWhy");
		this.contentMedia = document.id("contentMedia");
		this.contentNoMedia = document.id("contentNoMedia");
		this.contentContact = document.id("contact");

		this.fx = new Fx.Slide( this._element, { duration:500, onComplete: this.slideCompleteHandler.bind( this ) } );
		this.fx.hide();
	},
	updateHeight: function( height )
	{
		//this._element.setStyle( "height", height );
		this._element.tween( "height", height );
		this.fx.slideIn();
	},
	show: function( height )
	{
		//this._element.setStyle( "height", height );
		this._element.tween( "height", height );
		this.fx.slideIn();
	},
	hide: function()
	{
		this.fx.slideOut();
	},
	slideCompleteHandler: function()
	{
		//d("slideCompleteHandler",  this._element.getStyle("margin-top") );
		if(  parseInt( this._element.getStyle("margin-top") ) < 0 ) {
			this.fireEvent( EventList.CONTENTPANE_HIDE_COMPLETE, "hide" );
		}else{
			this.fireEvent( EventList.CONTENTPANE_SHOW_COMPLETE, "show" );
		}
	}

});



ui.ContentCasestudies = new Class
({
	Implements:[Events],

	title:null,
	contentMedia:null,
	mediaViewPort:null,

	contentNoMedia:null,
		p1NoMedia:null,
		p2NoMedia:null,
		p3NoMedia:null,

	controlBar:null,

	/**
	 * @type ui.ContentVideo
	 */
	video:null,

	/**
	 * @type ui.ContentGallery
	 */
	gallery:null,


	initialize: function()
	{
		this._element = document.id( "content" );
		this.title = document.id( "contrTitle" );
		this.contentMedia = document.id( "contentMedia" );
			this.mediaViewPort = document.id("mediaViewport");
		this.contentNoMedia = document.id( "contentNomedia" );
			this.p1NoMedia = this.contentNoMedia.getElement(".inner");
			this.p2NoMedia = this.contentNoMedia.getElement(".rl");
			this.p3NoMedia = this.contentNoMedia.getElement(".rr");

		this.controlBar = new ui.ContentControlBar();
	},
	reset: function()
	{
		//d( "ui.ContentCasestudies::reset()" );

		if( this.gallery ) {
			this.gallery.dispose();
			this.gallery = null;
		}
		if( this.video ) {
			this.video.dispose();
			this.video = null;
		}

	},
	getDomElement: function()
	{
		return this._element;
	},
	syncPlayerState: function( state )
	{
		//d("ui.COntentCasestudies::syncState", state );
		this.video.setPlayState( state == 2 ? false : true );
	},
	dispose: function( keepControlBar )
	{
		///d("ui.ContentCaseStudies::dispose()");
		if( !keepControlBar ) {
			this.controlBar.hide();
			this.controlBar.dispose();
		}
		if( this.gallery ) {
			this.gallery.dispose();
			this.gallery = null;
		}
		if( this.video ) {
			this.video.dispose();
			this.video = null;
		}
	},
	configureBehaviour: function()
	{
		this.controlBar.configureBehaviour();
	},
	initVideo: function( url )
	{
		this.video = new ui.ContentVideo( url, this.mediaViewPort, this.controlBar );
		this.controlBar.videoControlToggler.hide();
		this.controlBar.galleryControlToggler.show();
	},
	initGallery: function( galleryData )
	{
		//d( "ui.ContentCasestudies::initGallery()" );
		this.gallery = new ui.ContentGallery( galleryData, this.mediaViewPort, this.controlBar );
		this.controlBar.galleryControlToggler.hide();
		this.controlBar.videoControlToggler.show();
	},
	initVideoBar: function()
	{
		//d("ui.ContentCasestudies::iniVideoBar()");
		this.controlBar.showVideo();
		this.controlBar.show();
	},
	initGalleryBar: function()
	{
		//d("ui.ContentCasestudies::initGallerybar()");
		this.controlBar.showGallery();
		this.controlBar.show();
	},
	resetGalleryBar: function()
	{
		//d("ui.ContentCasestudies::resetGallerybar()");
		this.controlBar.hideGallery();
	},
	resetVideoBar: function()
	{
		//d("ui.ContentCasestudies::resetVideobar()");
		this.controlBar.hideVideo();
	},
	initTextBar: function()
	{
		this.controlBar.show();
	}
});
ui.ContentControlBar = new Class
({
	Implements:[Events],

	controlBarTitle:null,
	controlBarGallery:null,
	controlBarVideo:null,
		videoControlToggler: null,
		contrVideoBtn: null,
	galleryControlToggler: null,
		galleryBtnPrev:null,
		galleryBtnNext:null,
	controlBarClose:null,

	initialize: function()
	{
		this._element = document.id( "contControlbar" );
		this.controlBarTitle = document.id( "contrTitle" );
		this.controlBarGallery = document.id( "contrGallery" );
		this.controlBarVideo = document.id( "contrVideo" );
		this.controlBarClose = document.id( "contrClose" );
		this.videoControlToggler = document.id("contrVideoToggler");
		this.galleryControlToggler = document.id("contrGalleryToggler");
		this.galleryBtnPrev = document.id( "contrGalPrev" );
		this.galleryBtnNext = document.id( "contrGalNext" );
		this.contrVideoBtn = document.id("contrVideoBtn");

	},
	getDomElement: function()
	{
		return this._element;
	},
	configureBehaviour: function()
	{
		this.controlBarClose.addEvent( "click", this.clickCloseListener.bind( this ) );
		this.videoControlToggler.addEvent( "click", this.clickToggleVideoListener.bind( this ) );
		this.galleryControlToggler.addEvent( "click", this.clickToggleGalleryListener.bind( this ) );
	},
	showGallery: function()
	{
		this.controlBarGallery.setStyle( "display", "block" );
	},
	showVideo: function()
	{
		this.controlBarVideo.setStyle( "display", "block" );
	},
	hideGallery:function()
	{
		this.controlBarGallery.setStyle( "display", "none" );
		//this.galleryControlToggler.show();
	},
	hideVideo: function()
	{
		this.controlBarVideo.setStyle( "display", "none" );
		//this.videoControlToggler.show();
	},
	show: function()
	{
		var dsp = this._element.getStyle("display");
		var op = this._element.get("opacity");

		if( dsp == "none" || op == 0 ) {
			this._element.show().set( "opacity", 0 ).tween.delay( 1000, this._element, [ "opacity", 1 ] );
		}
	},
	hide: function()
	{
		this._element.hide();
	},

	dispose: function()
	{
		this.hideGallery();
		this.hideVideo();
		this.controlBarClose.removeEvents( "click" );
		this.videoControlToggler.removeEvent( "click" );
		this.galleryControlToggler.removeEvent( "click" );
		this.controlBar = null;
		d("ContentControlBar.dispose()");
	},


	// LISTENERS
	clickCloseListener: function()
	{
		this.fireEvent( EventList.CONTROLBAR_CLICK_CLOSE );
	},
	clickToggleVideoListener: function()
	{
		this.fireEvent( EventList.CONTROLBAR_CLICK_VIDEOTOGGLE );
	},
	clickToggleGalleryListener: function()
	{
		this.fireEvent( EventList.CONTROLBAR_CLICK_GALLERYTOGGLE );
	}
});



ui.ContentWhy = new Class
({
	Implements:[Events],
	close: null,
	viewport:null,
	videoURL:null,
	vW:540,
	vH:330,

	initialize: function()
	{
		this._element = document.id("contentWhy");
		this.close = document.id("contrClose");
		this.viewport = document.id("whyMedia");
		this.videoURL = SyConfig.VIDEO_WHY + "&amp;enablejsapi=1&version=3&amp;playerapiid=ytplayer";
	},
	enableBehaviour: function()
	{
		d("ui.ContentWhy::enableBehaviour()", this.close );
		this.listenClose();
		this.injectPlayer();
		this.listenClose.delay( 500, this );
	},
	disableBehaviour: function()
	{
		d("ui.ContentWhy::disableBehaviour()");
		this.close.removeEvents( "click" );
		this.viewport.empty();
	},
	getDomElement: function()
	{
		return this._element;
	},
	listenClose: function()
	{
		this.close.removeEvents( "click" ).addEvent( "click", this.closeClickListener.bind( this ) );
	},
	injectPlayer: function()
	{
		d("injectWhyPlayer");
		var url = this.videoURL;
		var agent = navigator.userAgent.toLowerCase();
		var isIphone = (agent.indexOf('iphone')!=-1);
		if( isIphone ) {
			this.viewport.empty();
			var embed = new Element("embed").setProperties({src:url, width:this.vW, height:this.vH, type:"application/x-shockwave-flash"});
			embed.inject( this.viewport );
			return;
		}
		new Swiff
		(
			url,
			{
				id: "syytplayer",
				width: this.vW,
				height: this.vH,
				container: this.viewport,
				params: {
					wmode:"window",
					allowfullscreen:true,
					bgcolor:"#E6E7E9",
					allowscriptaccess:"always"
				}
			}
		);
		this.playing = this.autoplay;
		if( this.playing ) {
			this.controlBar.contrVideoBtn.addClass("playing");
		}
		this.player = document.id( "syytplayer" );
	},
	closeClickListener: function()
	{
		d("huhuhuh clicked");
		this.fireEvent("clickClose");
	}
});


ui.ContentContact = new Class
({
	Implements:[Events],
	mapElement: null,
	map:null,
	close: null,

	initialize: function()
	{
		this._element = document.id("contact");
		this.mapElement = document.id("contactMap");
		this.close = document.id( "contactClose" );
	},
	getDomElement: function()
	{
		return this._element;
	},
	enableBehaviour: function()
	{
		d("ui.ContentContact::enableBehaviour()");
		if( !this.map ) {
			this.map = new ui.ContactMap( this.mapElement );
		}
		this.close.addEvent( "click", this.clickCloseListener.bind( this ) );
	},
	disableBehaviour: function()
	{
		d("ui.ContentContact::disableBehaviour()");
		this.close.removeEvents( "click" );
		this.map = null;
	},

	clickCloseListener: function()
	{
		this.fireEvent( "clickClose" );
	}
});

ui.ContentBlog = new Class
({
	Implements:[Events],
	close:null,
	initialize: function()
	{
		this._element = document.id("blog");
		this.close = document.id( "blogClose" );
	},
	getDomElement: function()
	{
		return this._element;
	},
	enableBehaviour: function()
	{
		this.close.addEvent( "click", this.clickCloseListener.bind( this ) );
	},
	disableBehaviour: function()
	{
		d("ui.ContentBlog::disableBehaviour()");
		this.close.removeEvents( "click" );
	},

	clickCloseListener: function()
	{
		this.fireEvent( "clickClose" );
	}
});

ui.ContactMap = new Class
({
	mapElement:null,


	initialize: function( mapEl )
	{
		this.mapElement = mapEl;
		Asset.javascript( "http://www.google.com/jsapi?key=ABQIAAAAelPGGZ59k_g2gFhE_xHxaxRJAtLSE_Q2Al3k3YvrBAwTHCzOCxS-msIRAHoSVYSiSUwx_Y3ATiFzPA", {id:"googleanalytics", onload: this.gaLoadedHandler.bind(this) } );
	},
	gaLoadedHandler: function()
	{
		google.load( "maps", "2", { callback: this.mapsLoaded.bind( this ) } );
	},
	mapsLoaded: function()
	{
		this.init.delay( 1300, this );
	},
	init: function()
	{
		map = new google.maps.Map2( this.mapElement );
		map.setCenter(new google.maps.LatLng( 51.5319, -0.1058 ), 16);

		/*
		var icon = new GIcon();
		icon.image = "gfx/tm-map-pin.png";
		icon.iconSize = new GSize(177, 77);
		icon.iconAnchor = new GPoint(114, 77);
		*/
		var icon = null;

		var p = new GLatLng(51.5319, -0.1058);
		var marker = new GMarker(p, icon);
		map.addOverlay(marker);


		var topRight = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10));
		map.addControl(new GSmallMapControl(), topRight );
	}
});





ui.ContentVideo = new Class
({
	videoURL:null,
	viewport: null,
	/**
	 * @type ui.ContentControlBar
	 */
	controlBar: null,
	vW:null,
	vH:null,
	player:null,
	autoplay: 0,
	playing:false,

	initialize:function( videoURL, viewport, controlBar )
	{
		//d("ui.ContentVideo::initialize()");
		videoURL = videoURL.replace( /\&amp;$/, "" );
		this.videoURL = videoURL + "&amp;enablejsapi=1&version=3&amp;playerapiid=ytplayer";
		this.viewport = viewport;
		this.controlBar = controlBar;
		this.vW = parseInt( this.viewport.getStyle( "width" ) );
		this.vH = parseInt( this.viewport.getStyle( "height" ) );

		this.controlBar.contrVideoBtn.addEvent( "click", this.clickVideoBtnListener.bind( this ) );

		this.controlBar.controlBarVideo.addClass( "active" );

		this.injectPlayer();
	},
	setPlayState: function( isPlaying )
	{
		this.playing = isPlaying;
		if( this.playing ) {
			this.controlBar.contrVideoBtn.addClass( "playing" );
		}else{
			this.controlBar.contrVideoBtn.removeClass( "playing" );
		}
	},
	dispose: function()
	{
		//d("ui.ContentVideo::dispose()");
		this.controlBar.controlBarVideo.removeClass( "active" );
		this.controlBar.contrVideoBtn.removeEvents( "click" );
		this.viewport.empty();
		this.viewport = null;

		try{
			this.player.eliminate( "ref" );
		}catch(e) {}
		this.player = null;
	},
	injectPlayer: function()
	{
		var url = this.videoURL;
		var agent = navigator.userAgent.toLowerCase();
		var isIphone = (agent.indexOf('iphone')!=-1);
		if( isIphone ) {
			this.viewport.empty();
			var embed = new Element("embed").setProperties({src:url, width:this.vW, height:this.vH, type:"application/x-shockwave-flash"});
			embed.inject( this.viewport );
			return;
		}
		new Swiff
		(
			url,
			{
				id: "syytplayer",
				width: this.vW,
				height: this.vH,
				container: this.viewport,
				params: {
					wmode:"window",
					allowfullscreen:true,
					bgcolor:"#E6E7E9",
					allowscriptaccess:"always"
				},
				vars : {
					autoplay: this.autoplay,
					fs: 1
				}
			}
		);
		this.playing = this.autoplay;
		if( this.playing ) {
			this.controlBar.contrVideoBtn.addClass("playing");
		}
		this.player = document.id( "syytplayer" );
	},

	// LISTENERS
	clickVideoBtnListener: function( e )
	{
		if( this.playing ) {
			this.player.pauseVideo();
		}else{
			this.player.playVideo();
		}
	}
});

function onYouTubePlayerReady( playerid )
{
	var player = document.id("syytplayer");
	player.addEventListener( "onStateChange", "onYtPlayerStateChange" );
}
function onYtPlayerStateChange( e )
{
	ApplicationFacade.getInstance().sendNotification( NotificationList.NOTIFY_PLAYER_STATECHANGE, e  );
	var player = document.id("syytplayer");
	player.setPlaybackQuality.delay( 100, player, [ "medium" ] );
}





ui.ContentGallery = new Class
({
	container: null,
	view: null,
	data:null,
	currentPos: -1,
	loadedAssets: null,
	imgId: null,
	loadDelayInt:null,

	/**
	 * @type ui.ContentControlBar
	 */
	controlBar:null,

	initialize: function( data, container, controlBar )
	{
		this.controlBar = controlBar;
		this.container = container;
		this.data = data;
		this.loadedAssets = new Array( data.length );
		this.imgId = "sgImg_"+this.container.get("id");
		this.buildView();
		this.configureBehaviour();
		this.next();
	},
	dispose: function()
	{
		//d("ui.ContentGallery::dispose()");
		if( this.view ) {
			this.view.btnNext.removeEvents( "click" );
			this.view.btnPrev.removeEvents( "click" );
			if( this.view.loader ) {
				this.view.loader.destroy();
			}
			if( this.view.position ) {
				this.view.position.destroy();
			}
			if( this.view.viewport ) {
				this.view.viewport.destroy();
				this.view.viewport = null;
				this.view = null;
			}
		}

		$clear( this.loadDelayInt );
	},
	next: function()
	{
		++this.currentPos;
		if( this.currentPos > this.data.length - 1 ) this.currentPos = 0;
		this.loadImage();

	},
	prev: function()
	{
		--this.currentPos;
		if( this.currentPos < 0 ) this.currentPos = this.data.length - 1;
		this.loadImage();
	},

	//  ################### PUBLIC GETTERS / SETTERS
	getCurrentItem: function()
	{
		var im = this.data[ this.currentPos ];
		return im.url;
	},


	// ################### PRIVATES
	buildView: function()
	{
		//d("ui.ContentGallery::buildView()");
		this.view = {
				controlBar : this.controlBar.controlBarGallery,
				btnPrev : this.controlBar.galleryBtnPrev,
				btnNext : this.controlBar.galleryBtnNext,
				container: this.container,
				loader: null,
				position:null,
				//caption : this.container.getElement(".sgCaption"),
				viewport : new Element( "div" ).set( "id", "mediaViewportGallery" ).inject( this.container ),
				vW : null,
				vH : null
		};

		this.view.loader = new Element("div").set( "id", "mediaViewportLoader" ).inject( this.view.container );
		//this.view.loader.set( "opacity", .4 );
		this.view.position = new Element("div").set( "id", "mediaViewportPosDisplay" ).inject( this.view.container, "bottom" );

		this.view.vW = parseInt( parseInt( this.view.container.getStyle( "width" ) ) );
		this.view.vH = parseInt( parseInt( this.view.container.getStyle( "height" ) ) );

	},

	loadImage: function()
	{
		this.loadDelayInt = this.view.loader.setStyle.delay( 300, this.view.loader, ["display", "block"] );
		new Asset.image( this.getCurrentItem(), { id:this.imgId, onload: this.imageLoadedHandler.bind( this ) } );
	},

	configureBehaviour: function()
	{
		this.view.btnNext.addEvent( "click", this.next.bind( this ) );
		this.view.btnPrev.addEvent( "click", this.prev.bind( this ) );
	},

	// ###################   LISTENERS
	/**
	 * @param img
	 */
	imageLoadedHandler: function( img )
	{
		$clear( this.loadDelayInt );
		if( !this.view ) {
			return;
		}
		this.view.loader.setStyle( "display", "none" );
		//if( $chk( $( this.imgId ) ) ) $( this.imgId ).dispose();

		img.set( "opacity", 0 ).tween( "opacity", 1 );
		img.inject( this.view.viewport );

		var targetW = this.view.vW;
		if( img.width < targetW ) {
			var fac = targetW / img.width;
			var newW = img.width * fac;
			var newH = img.height * fac;
			img.width = newW;
			img.height = newH;
		}

		// if more than 2 items delete first in dom children stack
		var children = this.view.viewport.getElements("img");
		if( children.length > 3 ) {
			var c1 = children[0];
			c1.destroy();
		}

		//this.updateCaptionDisplay();
		this.updatePositionInSetDisplay();
	},

	updateCaptionDisplay: function()
	{
		this.view.caption.set( "text", this.getCurrentItem()[ 1 ] );
	},


	updatePositionInSetDisplay: function()
	{
		var l = this.data.length;
		this.view.position.set("text", this.currentPos + 1 + " / " + l);
	}

});