/*
	Date: 24 April 2011
	Title: Homepage script for Tony & Guy
	Description: Provide an alternative for CSS float using jQuery
	Version 6
	
	Author: Steven Lukas
	E-mail: steven@z2design.nl
	
	(C) Z2 Design (www.z2design.nl)
*/

$(document).ready(function(){
	hp.init();
});

var hp = {
	column_count : 0,
	column_current : 0,
	current_row : 0,
	
	init : function(){
		//$('#blogItems').hide();
		$('#blogNav').hide();
		$(window).resize(function() {
			hp.resize();
			hp.set_visible();
			hp.load_items();
		});
		$(window).scroll(function() {
			hp.set_visible();
			hp.load_items();
		});
		var column_count = hp.calc_columns(4,6);
		hp.set_columns(column_count);
		hp.add_items();
		hp.load_items();
		setInterval ( hp.gallery.timer, 2500 );
		setInterval ( hp.load_items, 2500 );

		hp.set_visible();
		hp.set_links();
		hp.set_hover();
	},
	
	set_hover : function(){
		$('.blogItem:not(.set_hover)').each(function(){
			$(this).find('.rollovertext').css({'margin-bottom' : -($(this).height()+20)});
			$(this).addClass('set_hover');
			$(this).hover(function(){
				$(this).find('.rollovertext').show().animate({
					'margin-bottom' : 0
				},300);
				
				$(this).find('.contents .readmore2').show().animate({
					'margin-bottom' : 0
				},300)
			}, function(){
				$(this).find('.rollovertext').animate({
					'margin-bottom' : -($(this).find('.rollovertext').height()+20)
				}, 300, function(){
					$(this).hide();
				});
				
				$(this).find('.contents .readmore2').animate({
					'margin-bottom' : -20
				}, 300, function(){
					$(this).hide();
				});
			});
			
			$(this).find('.readmore2').css({'margin-bottom' : -20}).hide();
		});
		
		
	},
	
	set_links : function(){
		$('.blogItem a.link:not(.hidden)').each(function(){
			$(this).addClass('hidden');
			var target = $(this).attr('href');
			$(this).parent().parent().find('.handle').click(function(){
				window.location = target;
			});
		});
	},
	
	set_visible : function(){
		//if(hp.get_row()){
			$('.column .blogItem').each(function(){
				var item_offset = $(this).offset();
				var window_height = $(window).height();

				var item_top = item_offset.top +50;
				var item_bottom = item_offset.top + $(this).height()-50;
				var window_top = $(window).scrollTop(); 
				var window_bottom = window_top + window_height; 
			
				if(item_top > window_top && item_bottom < window_bottom){
					$(this).addClass('visible');
				} else {
					$(this).removeClass('visible');
				}
			});
		//}
	},
	
	get_row : function(){
		var window_scroll = $(window).scrollTop();
		var current_row = Math.ceil($(window).scrollTop() / 100);
		if(hp.current_row != current_row){
			hp.current_row = current_row;
			return true;
		}
		return false;
	},
	
	resize : function(){
		var column_count = hp.calc_columns(4,6);
		if(hp.column_count != column_count){
			hp.column_current = 0;
			hp.set_columns(column_count);
			hp.add_items();
		}
	},
	
	set_columns : function (column_count){
		var centerPanel = $('#centerPanel');
		
		if($('#leftPanel').length){
			var setWidth = (column_count+1)*200;
		} else {
			var setWidth = column_count*200;
		}
		/*
		if(centerPanel.length){
			var setWidth = (column_count+1)*200;
		} else {
			var setWidth = (column_count+1)*200;
		}
		*/
		$('#container').width(setWidth);
		$('#footer').width(setWidth);
		$('#body').width(setWidth);
		
		if(column_count*200 <= 800){
			//$('#logo').css({ top : 0});
		} else {
			//$('#logo').css({ top : 24});
		}
		hp.column_count = column_count;
		if($('#columns').length){
			hp.remove_items();
			$('#columns').remove();
		}
		var column_container = $('<div>').attr({ id : 'columns' })
		for( i = 0; i < column_count; i++ ){
			var column = $('<div>')
				.attr({ id : 'column_'+i })
				.addClass('column')
				.css({'z-index' : 10+column_count-i});
			column_container.append(column);
		}
		column_container.append($('<div>').addClass('clear'));
		var centerPanel = $('#centerPanel');
		if(centerPanel.length){
			centerPanel.append(column_container);
		} else {
			$('#body').append(column_container);
		}
	},
	
	calc_columns : function(min_columns, max_columns){
		var centerPanel = $('#centerPanel');
		var viewport_width = $(window).width();
		columns = Math.floor(viewport_width / 200);
		if(columns > max_columns) columns = max_columns;
		if(columns < min_columns) columns = min_columns;
		if(centerPanel.length){
			columns--;
			centerPanel.width(columns*200);
		}
		return columns;
	},
	
	set_column_current : function(amount){
		hp.column_current = amount;
		if(hp.column_current > hp.column_count) hp.column_current = 0;
	},
	
	add_column_current : function(){
		hp.column_current++;
		if(hp.column_current > hp.column_count) hp.column_current = 0;
	},
	
	remove_items : function(){
		for(i = 0; i < $('.blogItem').length; i++){
			$('.blogItem[rel=pos'+i+']').appendTo($('#blogItems'));
		}
	},
	
	add_items : function(){
		$('#blogItems .blogItem').each(function(){
			hp.add_item($(this));
			$(this).height($(this).height());
			$(this).width($(this).width());
		});
	},
	
	add_item : function(elem){
		var width = hp.get_item_width(elem);
		var column = hp.find_spot(width);
		var column_elem = $('#column_'+column);
		if(width > 1){
			hp.add_extra_spacers(column, width);
		}
		elem.appendTo(column_elem);
		hp.set_column_current(column+1);
		//var height = Math.ceil(elem.height());
		var height = Math.ceil(elem.find('.handle').height());
		if(elem.find('.subtext').length){
			height += elem.find('.subtext').height()+20;
		}
		elem.height(height);
		
		
		var offset = elem.offset();
		for(i = 1; i < width; i++){
			if(i > hp.column_count) break;
			hp.add_spacer(height, hp.column_current, offset.top);
			hp.add_column_current();
		}
		var gallery_container = elem.find('.gallery .image_container');
		if(gallery_container.length){
			hp.gallery.init(gallery_container);
		}
	},
	
	get_item_width : function(elem){
		for(i = 1; i < 5; i++){
			if(elem.hasClass('w'+i)) return i;
		}
		return false;
	},
	
	offset : 0,
	loading : false,
	at_end : false,
	load_items : function(){
		if(hp.at_end) return;
		// use ajax to load extra items
		var body_height = $('body').height();
		var window_height = $(window).height();
		var window_top = $(window).scrollTop(); 
		//alert((body_height -window_height) +'<'+ window_top);
		if((body_height - window_height < window_top + Math.floor(window_height/2)) && !hp.loading){
			hp.loading = true;
			hp.offset += 10;
			$.ajax({
				url: "/ajax/blog?offset="+hp.offset,
				context: document.body,
				success: function(data){
					if(data == ''){
						hp.at_end = true;
					} else {
						$('#blogItems').append(data);
						hp.add_items();
					}
					hp.set_hover();
					hp.loading = false;
				}
			});
		}
	},
	
	add_spacer : function(height, column, elem_y){
		var spacer = $('<div>')
			.addClass('spacer')
			.addClass('blogItem')
			.height(height)
		spacer.appendTo('#column_' + (column));
		var offset = spacer.offset();
		if(offset.top < elem_y){
			var margin = elem_y - offset.top;
			spacer.css({'margin-top': margin});
		}
	},
	
	add_extra_spacer : function(height, column){
		var spacer = $('<div>')
			.addClass('extra_spacer')
			.addClass('blogItem')
			.height(height)
		spacer.appendTo('#column_' + (column));
	},
	
	
	add_extra_spacers : function(column, width){
		var y_longest = 0;
		for(w = 1; w < width; w++){
			var adjecent_column = column+w;
			var y_temp  = hp.column_get_y(adjecent_column, 1);
			if(y_temp > y_longest){
				y_longest = y_temp;
			}
		}
		for(c = column; c < column+width; c++){
			var y_column = hp.column_get_y(c,1);
			var height = (y_longest - y_column)-30;
			if(height > 0) {
				hp.add_extra_spacer(height, c);
			}
		}
	},
	
	find_spot : function(width){
		var y = 99999999;
		for(c = 0; c < hp.column_count; c++){
			var column_y = hp.column_get_y(c, width);
			if(y > column_y){
				if(c + width-1 < hp.column_count){
					y = column_y;
					column = c;
				}
			}
		}
		return column;
	},
	
	column_get_y : function(column, width){
		if(width < 1) width = 1;
		var column_y = 0;
		// jquery crashing on loops of 1? weird
		// needs serious debugging and cleaning up
		for(w = 0; w < 10; w++){
			if(w < width){
				var last_item = $('#column_' + (column+w) + ' .blogItem:last');
				if(last_item.length){
					var last_item_height = last_item.height();
					var last_item_offset = last_item.offset();
					column_y_c = last_item_offset.top + last_item.height();
					if(column_y_c > column_y){
						column_y = column_y_c;
					}
				}
			}
		}
		return column_y;
	},
	
	gallery : {
		init : function(container){
			if(container.hasClass('init')) return;
			container.addClass('init');
			
			container.find('.image:last').prependTo(container);
			container.find('.image:last').prependTo(container);
			hp.gallery.next(container, 0);
			
			container.parent().parent().find('.handle').draggable({ 
				distance: 20,
				axis: 'x',
				start: function(event, ui){
					var container = $(this).parent().find('.gallery .image_container');
					container.addClass('touched');
				},
				stop: function(event, ui){
					var container = $(this).parent().find('.gallery .image_container');
					var container_offset = $(this).position();
					if(0 > container_offset.left){
						hp.gallery.next(container, 'slow');
					} else {
						hp.gallery.prev(container, 'slow');
					}
					$(this).css({left:0});
				},
				drag: function(event, ui){
					var container = $(this).parent().find('.gallery .image_container');
					var container_offset = $(this).position();
					var width = container.parent().width();
					var left = container_offset.left - width;
					container.css({'left':left})
				}
			});
		},
		
		prev : function(container, speed){
			if(container.hasClass('animating')) return;
			container.parent().parent().find('.handle').draggable( "option", "disabled", true );
			var container_offset = container.position();
			var width = container.parent().width();
			var left = 0;
			container
				.addClass('animating')
				.addClass('touched')
				.animate({
					'left' : left
				}, speed, function(){
					var container_offset = container.position();
					var width = container.parent().width();
					var left = container_offset.left - width;
					$(this).find('.image:last').prependTo($(this));
					$(this).css({'left' : -width});
					$(this).removeClass('animating');
					$(this).parent().parent().find('.handle').draggable( "option", "disabled", false );
				});
		},
		
		next : function(container, speed){
			if(container.hasClass('animating')) return;
			var container_offset = container.position();
			container.parent().parent().find('.handle').draggable( "option", "disabled", true );
			var width = container.parent().width();
			var left = -(width*2);
			container
				.addClass('animating')
				.addClass('touched')
				.animate({
					'left' : left
				}, speed, function(){
					var container_offset = container.position();
					var width = container.parent().width();
					var left = container_offset.left - width;
					$(this).find('.image:first').appendTo($(this));
					$(this).css({'left' : -width});
					$(this).removeClass('animating');
					$(this).parent().parent().find('.handle').draggable( "option", "disabled", false );
				});
			if(speed == 0){
				container.removeClass('touched');
			}
		},
		
		last_item : {},
		maxTime : 0,
		timer : function(){
			var blogItem = $('.image_container:not(.touched):not(:animated):not(.spacer):not(.extra_spacer):not(.ui-draggable-dragging)');
			if(blogItem.length){
				var random_val = Math.floor(Math.random() * blogItem.length);
				var counter = 0;
				
				blogItem.each(function(){
					if(counter == random_val){
						hp.gallery.next($(this), 'slow');
						$(this).addClass('touched');
					}
					counter++;	
				});
			}
			
			if(hp.gallery.maxTime > 1){
				$('.image_container:not(:animated):not(.ui-draggable-dragging)').removeClass('touched');
				hp.gallery.maxTime = 0;
			}
			hp.gallery.maxTime++;
			
			/*
			var selector = '.column .blogItem.visible .gallery .image_container:not(.touched):not(:animated):not(.spacer):not(.extra_spacer):not(.ui-draggable-dragging)';
			var items = $(selector);
			//var next = false;
			if(!items.length){
				$('.column .blogItem .gallery .image_container.touched').removeClass('touched');
				items = $(selector);
				try{
					if(items.length > 1){
						hp.gallery.last_item.addClass('touched');
						items = $(selector);
					}
				} catch(err){}
			}
			if(items.length){
				var random_val = Math.floor(Math.random() * items.length);
				var counter = 0;
				
				items.each(function(){
					if(counter == random_val){
						//next = $(this);
						hp.gallery.next($(this), 'slow');
						hp.gallery.last_item = $(this);
						//next = true;
					}
					counter++;	
				});
			}
			*/

		}
	}
	
}