var language = "de";

/******************************************************************
 * Helper php style urlencode & urldecode
 *
 *****************************************************************/
var URLEncode = new Class({
	urlEncodeCharacter:function(c) {
		return '%' + c.charCodeAt(0).toString(16);
	},
	
	urlDecodeCharacter:function(str, c) {
		return String.fromCharCode(parseInt(c, 16));
	},
	
	encode:function(s) {
		return encodeURIComponent(s).replace( /\%20/g, '+' ).replace( /[!'()*~]/g, this.urlEncodeCharacter );
	},
	
	decoder:function(s) {
		return decodeURIComponent(s.replace( /\+/g, '%20' )).replace( /\%([0-9a-f]{2})/g, this.urlDecodeCharacter);
	}
});
URLEncode = new URLEncode();

/******************************************************************
 * Helper for rollovers
 *
 *****************************************************************/
var Hover = new Class({
	isTweening:false,
	create:function(el, opt) {
		if($(el).get('tag') == 'a') {
			$(el).set('tween', {
				'duration':160
			});
			return;
		}
		el.setStyle('text-align', 'left');
		el.getElement('a').set('tween');
		var x = 107.5-el.getElement('a').getSize().x/2;
		if(!el.hasClass('selected')) {
			el.getElement('a').setStyle('margin-left', x);
		}
		el.addEvent('mouseenter', function(e){
			if(el.hasClass('selected')) return;
			
			el.addClass('mouseover');
			el.getElement('a').tween('margin-left', 0);
		});
		
		el.addEvent('mouseleave', function(e){
			if(el.hasClass('selected')) return;
		
			el.removeClass('mouseover');
			el.getElement('a').tween('margin-left', x);
		});
	}
});

Hover = new Hover();

/******************************************************************
 * Helper for the Filter menu
 *
 *****************************************************************/
var FilterMenu = new Class({
	
	create:function(elements) {
		elements.forEach(function(el, i) {
			el.addEvent('click', function(e) {
				if(e.target.getElement('a')) {
					new URI(e.target.getElement('a').get('href')).go();
				}
			});
			
		 	Cufon.replace(el, {
				fontFamily: 'Knockout 27',
				hover:true,
				onAfterReplace:Hover.create
			});
		});
				
	}
});

FilterMenu = new FilterMenu();

/******************************************************************
 * Helper for text jusitfication
 *
 *****************************************************************/
var LetterJustify = new Class({
	create:function(elements) {
		elements.forEach(function(el){
			this.createSingle(el);
		}.bind(this));
	}
	
	,createSingle:function(el) {
		if(el.getElement('span')==null) return;
		
		el.fade('hide');

		var spans = el.getChildren('span');
		
		spans.forEach(function(span){
			var new_span = new Element('span');
			var parent 	 = span;
			var styles 	 = new Array();
			var child;
			
			var classes = span.get('class');
			if(!styles.contains(classes)){
				styles.push(classes);
			}
			
			while(parent.getElement('span')!=null) {
				child = parent.getElement('span');
				var classes = child.get('class');
				if(!styles.contains(classes)){
					styles.push(classes);
				}
				parent = child;
			}
			
			styles.forEach(function(style){
				new_span.addClass(style);
			});
			
			new_span.set('text', span.get('text'));
			new_span.replaces(span);
		});
		
		spans = el.getChildren('span');
		spans.forEach(function(span){
			if(!span.hasClass('arial')) {
				span.fade('hide');
				if(span.hasClass('justify-words') || span.hasClass('heading-info')) {
					var words = span.get('text').split(" ");
					var sentence = "";
					words.forEach(function(word) {
						sentence = sentence+word;
					});
					
					span.store('words', words);
					span.set('text', sentence);
				}
				Cufon.replace(span, {
					fontFamily:'Knockout 27',
					onAfterReplace:this.onReplaced.bind(this)
				});
			}
		}.bind(this));
		
		el.fade('show');
	}
	
	,onReplaced:function(span) {
			
		var w = span.getSize().x;
		var tw = span.getParent().getSize().x;
		
		var wl = span.get('text');
				
		if(span.hasClass('justify')) {
			var s = (tw-w)/(wl.length-1);
			var cs = parseInt(span.getStyle('letter-spacing').split('px'));
			
			if(isNaN(cs)) {
				span.setStyle('letter-spacing', s);
			} else {
				span.setStyle('letter-spacing', s+cs);
			}
		}
		
		if(span.hasClass('justify-words')) {
			var words = span.retrieve('words');
			var s = (tw-w)/(words.length-1);
			var styles = span.getStyles();
			
			span.empty();
			
			words.forEach(function(word, i){
				
				var part = new Element('span');
				
				part.set('text', word);
				part.setStyles(styles);
				span.adopt(part);
				
				if(i!=0) {
					part.setStyle('margin-left', s-3);
				}
			});
		}
	
		
		if(span.hasClass('center')) {
			span.setStyle('text-align', 'center');
		}
		
		if(!span.getParent().hasClass('heading-info')) {		
			span.setStyle('width', span.getParent().getSize().x);
			span.setStyle('display', 'block');
		}
		
		if(span.hasClass('small')) {
			span.setStyle('line-height', 13);
		}
		if(span.hasClass('medium')) {
			span.setStyle('line-height', 35);
		}
		if(span.hasClass('large')) {
			span.setStyle('line-height', 60);
		}
		
		
		if( span.hasClass('post-heading-27') || 
			span.getParent().hasClass('post-heading-27')) {
			Cufon.replace(span, {
				fontFamily:'Knockout 27'
			});
		}
		
		if( span.hasClass('post-heading-29') || 
			span.getParent().hasClass('post-heading-29')) {
			Cufon.replace(span, {
				fontFamily:'Knockout 29'
			});
		}
		
		if( span.hasClass('post-heading-34') || 
			span.getParent().hasClass('post-heading-34')) {
			Cufon.replace(span, {
				fontFamily:'Knockout 34'
			});
		}
		
		span.fade('show');

	}
});

LetterJustify = new LetterJustify();

/******************************************************************
 * Grid
 *
 *****************************************************************/
var Blocks = new Class({
	Implements	 : Events,
	maxY		 : 0,
	totalHeight	 : 0,
	numCols		 : -1,
	hasBlocks	 : false,
	isInitialized: false,
	
	initialize: function() {
		var me = this;
		this.min_cols = 4;
		
		this.col_width = 100;
		this.gutter = 10;
		
		this.content = document.getElements('.block'); // html
		this.data = new Array(); // keeps track of size per block
		
		// keep track of each block width.
		this.content.each(function(el, dx) {
			var size = el.get('class').match(/w[0-9]/);
			if(size!=null) {
				this.hasBlocks = true;
			} else {
				return;
			}
			var images_container = el.getElement('.images-container');
			/*
			if(el.getElement('.images-container')) {
				
				var images = el.getElement('.images-container').getElements('img');
				images.forEach(function(img){
					if(!img.complete) {
						img.addEvent('load', this.onImageLoaded.bind(this));
					}
				}.bind(this));
				
				
			}
			*/
			var w = size[0].replace('w','');
			me.data.push({width:Number(w)});
		}.bind(this));
		
		if(!this.hasBlocks) {
			this.positionAssets();
			return;
		}
		
		this.forceResize();
		this.forceResize.periodical(20,this);
		
	}	
	
	,forceResize: function() {
		this.onResize();
	}
	
	,onResize: function() {
		// get number of usable columns.
		var width = window.getSize().x-260;
		width = Math.floor(width/(100)) * (100);
		
		
		this.num_cols = Math.max(Math.floor(width/(this.col_width + this.gutter)), this.min_cols);
				
		if(this.numCols == this.num_cols && this.isInitialized) {
			return;
		}
		
		this.numCols = this.num_cols;
	
		// Layout the content blocks.
		this.layout();
		//this.isInitialized = true;
	}
	
	,onImageLoaded:function(e) {	
		this.onResize();
	}
	
	,layout: function() {
		var me = this;
		this.cols = new Array();
		var i = 0; 
		
		while(i < this.num_cols) {
			this.cols.push({x:i++, y:0, width:0});
		}
		
		this.content.each(function(node, dx) {
			me.cols.sort(me.ySort); 
			me.layoutWide(me.data[dx], dx);
		});
		
		this.cols.sort(this.ySort);
		this.maxY = this.cols[this.cols.length-1].y;
	
		// Position assets
		this.positionAssets();
		
	}
	
	,positionAssets:function() {
		var w = window.getSize().x;
		var h = this.maxY+140;
		
		if(h<window.getSize().y)
			h = window.getSize().y - 60;
			
		if(h<$('container-left').getSize().y) {
			h = $('container-left').getSize().y;
		}
		
		$('back-to-top').setStyle('top',h +"px");
		$('back-to-top').setStyle('left', (window.getSize().x/2)-10.5);
		$('back-to-top').setStyle('visibility', 'visible');
		
		$('logo').setStyle('left', (w/2)-197.5);
		$('logo').setStyle('top', 20);
		$('logo').setStyle('visibility', 'visible');
	}
	
	,layoutWide: function(node, dx) {
		this.cols.sort(this.xSort);
		var i,j;
		
		if(!node)
			return;
			
		var last_col = this.num_cols - node.width +1; // which col to place
		
			
		var max_y, spanned_y, possible_places = [];
		for(i = 0; i < last_col; ++i) {
			max_y = 0;
			for(j = 0; j < node.width; ++j) {
				spanned_y = Number(this.cols[i+j].y);
				max_y = Math.max(spanned_y, max_y);
			}
			
			possible_places.push({x:this.cols[i].x, y:max_y, width:this.cols[i].width});
		}
		
		possible_places.sort(this.ySort);
		
		if(!possible_places[0]) return;

		var nx = possible_places[0].x * (this.col_width + this.gutter);
		this.attachItem(this.content[dx], nx , possible_places[0].y);
		
		// update spanned columns.
		for(i = possible_places[0].x; i < Number(possible_places[0].x) + Number(node.width); ++i) {
			this.cols[i].y = possible_places[0].y + this.content[dx].getSize().y ;
			
		}
		this.cols.sort(this.xSort);
	}
	
	,attachItem: function(node, x, y) {
		var offset_y = $('page-quick-menu').getSize().y;
		
		node.setStyles({
			top:y+(10+offset_y)+"px"
			,left:x +"px"
		});
	}
	
	,xSort: function(a,b) {
		return (a.x - b.x);
	}
	
	,ySort: function(a,b) {
		if(a.y == b.y) { // if same y position...
			return (a.x -b.x); // ...when a.x less then b.x: place a above b 
		}
		else {
			return (a.y-b.y); // a.y less then b.y, place a above b
		}
	}
});

/******************************************************************
 * Main Class
 *
 *****************************************************************/
var HolzerKobler = new Class({
	blocks:null,
	pageHeight:0,
	imageLayer:null,
	language:"de",
	menuIndex:0,
	fontsReady:0,
	fontsTotal:0,
	
	initialize:function() {
		window.addEvent('domready', this.onDOMReady.bind(this));
	}
	
	,onDOMReady:function() {
		
		try {
			
			$('grid').fade('hide');
			
			
			this.initBlocks();
			
			this.initLogos();
			this.initSearch();
			this.initLayer();
			
			this.initFonts();
			
			this.initLeftMenu();
			
			$('grid').fade('show');
			
			if(this.blocks.hasBlocks) {
				this.initFBLikes();
			}
			
			this.addEvents();
			this.position();
		} catch(err) {
		
		}
	}
	
	,addEvents:function() {
		window.addEvent('resize', this.position.bind(this));
	}
	
	,initFonts:function() {
		try {
			var me = this;
			
			
			Cufon.replace('.knockout27', {
				fontFamily: 'Knockout 27',
				hover:true,
				forceHitArea:true
			});
			
			Cufon.replace('.knockout29', { 
				fontFamily: 'Knockout 29', 
				forceHitArea:true
			});
			
			Cufon.replace('.knockout34', { 
				fontFamily: 'Knockout 34', 
				forceHitArea:true
			});
			
			Cufon.replace('.knockout53h', { 
				fontFamily: 'Knockout 53H', 
				forceHitArea:true
			});
		} catch(err) {
		
		}
	}
	
	,initLeftMenu:function() {
		try {
			// Init filter menu
			FilterMenu.create($$('ul.filter-list li'));
			//console.log(this.menuIndex);
			var menu_acc = new Fx.Accordion($$('.filter-toggler'), $$('.filter-content'), {
				display: 			this.menuIndex,
			    alwaysHide: 		true,
			    initialDisplayFx: 	false,
			    opacity:			false
			});
			
		} catch(err) {
			//console.log(err);
		}
	}
	
	,initBlocks:function() {
		try {
			this.blocks = new Blocks();
			LetterJustify.create($$('h2'));
		} catch(err) {
		
		}
	}
	
	,initLogos:function() {
		try {
			$('back-to-top').addEvent('click', this.scrollToTop.bind(this));
		} catch(err) {
		
		}
	}
	
	,like:function(e){ 
		e.stop();
		
		console.log(e);
		
		try {
			
			var el = $(e.target);
			t = el.retrieve('title');
			u = new URI().get('host')+el.get('href')+'/?'+Math.random();
			
			window.open('http://www.facebook.com/sharer.php?u='+u+'&t='+URLEncode.encode(t),'sharer','toolbar=0,status=0,width=1000,height=500');return false;
		} catch(err) {
		
		}
	}
	
	,initFBLikes:function() {
		try {
			
			this.blocks.content.forEach(function(block){
				var title = block.getElement('.post-title')
				if(title) title = title.get('text');
				
				var fb_buttons = block.getElements('.fb-like-button');
				fb_buttons.store('title', title);
				fb_buttons.addEvent('click', this.like.bind(this));
			
			}.bind(this));	
			
			var page_fbl = $('page-quick-menu').getElement('.fb-like-button');
			
			//page_fbl.store('title', $('grid').getElement('.post-title').get('text'));
			page_fbl.addEvent('click', this.like.bind(this));
			
		} catch(err) {
		
		}
	}
		
	,initSearch:function() {	
		try {
			$('search').addEvent('keydown', function(e) {
				if(e.key == "enter") {
					new URI("/"+language+"/search/"+URLEncode.encode($('search').get('value'))).go();
		 		 }
			}.bind(this));
		} catch(err) {
		
		}		
		/*
		$('search').addEvent('click', function(e){
			$('search').focus();
			$('search').set('value','');
		});
		*/
	}
	
	,setLang:function(lang) {
		this.language = lang;
	}
	
	,setMenu:function(menu) {
		this.menuIndex = menu;
	}
	
	,initLayer:function() {
		try {
			this.imageLayer = new mooImageLayer({
				resize:true
			});
		} catch(err) {
		
		}
	}
	
	,scrollToTop:function() {
		try {
			var scrollFX = new Fx.Scroll($(document.body)).toTop({
				duration:300, 
				transition:Fx.Transitions.Expo.easeOut
			});
		} catch(err) {
		
		}
	}
	
	,position:function() {
		try {
			var w = window.getSize().x;
			if(w<750) w = 750;
			
			$('zurich-berlin').setStyle('left', w-51);
			$('zurich-berlin').setStyle('top', window.getSize().y-340);
			$('zurich-berlin').setStyle('visibility', 'visible');
			
			if(this.blocks.hasBlocks) 
				this.blocks.positionAssets();
		} catch(err) {
		
		}
		
	}
	

});

HolzerKobler = new HolzerKobler();