/**
WP_Mosaic (feat. 'JQuery' & 'JQuery Tools')

An auto-resizing, auto-updating, scrolling mosaic of blog posts to be used in place of the traditional Wordpress Loop.
Copyright 2011 Nathan Binford
**/

var currentHover = new Array(0);

function outputMosaic() {
	var mosaic = $(".scrollable").scrollable({ circular: true });
	
	$("#mosaic").mousemove(onMouseMoveInMosaic);
	$("#mosaic").mouseleave(onMouseOutOfMosaic);
	$(".tile_bounds").hover(function(ev) {
		jQuery.each($(this).children(), function (ind, ele) {
			if (ind == 1) $(ele).fadeTo(400, .8);
		});
	}, function(ev) {
		jQuery.each($(this).children(), function (ind, ele) {
			if (ind == 1) $(ele).fadeOut(400);
		});
	});
	$("#scroll_left").fadeTo(0, .6);
	$("#scroll_right").fadeTo(0, .6);
	/*
	$("#scroll_left").hover(function () {
		$(this).fadeTo(300, .9);
	}, function() {
		$(this).fadeTo(300, .6);
	});
	$("#scroll_right").hover(function () {
		$(this).fadeTo(300, .9);
	}, function() {
		$(this).fadeTo(300, .6);
	});*/
	
}

var ROWS = 2;
var TILE_WIDTH = 250;
var TILE_HEIGHT = 359;
var ORIGINAL_H = 359;
var TILE_PAD = 10;
var ORIGINAL_PAD = 5;
var ORIGINAL_HPAD = 5;
//var TILE_PAD_H = 5;
var TILES = 0;
var CONTAINERW = 0;
var CONTAINERH = 0;
var SCREEN_DIFFERENCE = 0;//50;
var BOX_CNT = 0;
var numOfBoxes = 0;
var RESERVED_HEIGHT = 100;
var MOSAIC_PADDING = 5;

function resizeMosaic() {
	
	//determine bounds by screen size
	var screensize = window.innerWidth - SCREEN_DIFFERENCE - (MOSAIC_PADDING*2);
	TILES = Math.floor(screensize / (TILE_WIDTH+ORIGINAL_PAD));
	var negativeSpace = screensize - (TILES * (TILE_WIDTH+ORIGINAL_PAD));
	TILE_PAD = Math.floor(negativeSpace / TILES);
	if (TILES * (TILE_WIDTH+TILE_PAD+ORIGINAL_PAD) > screensize) {
		TILES--;
		negativeSpace = screensize - (TILES * (TILE_WIDTH+ORIGINAL_PAD));
		TILE_PAD = Math.floor(negativeSpace / TILES);
	}
	CONTAINERW = screensize;//TILES * (TILE_WIDTH+TILE_PAD+ORIGINAL_PAD);
	var heightspace = window.innerHeight - RESERVED_HEIGHT;
	var tmp_height = Math.floor(heightspace / ROWS);
	if (tmp_height < ORIGINAL_H) TILE_HEIGHT = tmp_height;
	else TILE_HEIGHT = ORIGINAL_H;
	CONTAINERH = ROWS * (TILE_HEIGHT+ORIGINAL_PAD);
					
	//resize
	MOSAIC.parentNode.removeChild(MOSAIC);
	MOSAIC = document.createElement("div");
	MOSAIC.setAttribute('class', 'scrollable');
	MOSAIC.setAttribute("id", "mosaic");
	MOSAIC.style.height = CONTAINERH + "px";
	MOSAIC.style.width = "100%";
	document.getElementById('mosaic_wrapper').appendChild(MOSAIC);
	var scroll_left = createPrevButton();
	var scroll_right = createNextButton();
	MOSAIC.innerHTML = scroll_left+scroll_right;
	if (IS_HOME) MOSAIC.innerHTML += createLogoTile();
	
	MOSAIC_CONTAINER = document.createElement("div");
	MOSAIC_CONTAINER.setAttribute("class", "items");
	MOSAIC_CONTAINER.setAttribute("id", "mosaic_container");
	MOSAIC.appendChild(MOSAIC_CONTAINER);
	//MOSAIC_CONTAINER = document.getElementById('mosaic_container');
	
	numOfBoxes = (Math.ceil(MOSAIC_TILES.length / (TILES*ROWS)));
	
	var logo_offset = IS_HOME ? 1 : 0;
	for (var i = 0; i < numOfBoxes; i++) {
		//create the box
		var box = document.createElement('div');
		box.setAttribute('class', 'box');
		
		box.style.width = screensize + "px";
		box.style.height = CONTAINERH + "px";
		box.style.marginRight = SCREEN_DIFFERENCE + "px";
		MOSAIC_CONTAINER.appendChild(box);
		
		//fill with tiles
		var setLen = ((TILES*ROWS)-logo_offset) + (((TILES * ROWS)-logo_offset) * i) > MOSAIC_TILES.length ? MOSAIC_TILES.length : ((TILES*ROWS)-logo_offset) + (((TILES * ROWS)-logo_offset) * i);
		var pstart = i != 0 ? ((TILES * ROWS)-logo_offset) * i : 0;
		var p = 0, tI = 0;
		for (p = pstart; p < setLen; p++) {
			if (p == pstart && IS_HOME) box.innerHTML += "<div class=\"tile logo_placeholder\" style=\"margin-right: " + ORIGINAL_PAD + "px; height: " + (TILE_HEIGHT) + "px; width: " + (TILE_WIDTH+TILE_PAD) + "px; margin-bottom: " + ORIGINAL_HPAD + "px;\"></div>";
			box.innerHTML += createTile(MOSAIC_TILES[p], tI++, i);
		}
	}
	MOSAIC_CONTAINER.style.left = (-1 * window.innerWidth) + "px";
	
	outputMosaic();
}

function createTile(tile, tileIndex, boxIndex) {
	var out = "<div id=\"tile_" + boxIndex + "_" + tileIndex + "\" class=\"tile_bounds\" style=\"cursor: pointer; margin-right: " + ORIGINAL_PAD + "px; margin-bottom:  " + ORIGINAL_HPAD + "px; width: " + (TILE_WIDTH+TILE_PAD) + "px; height: " + TILE_HEIGHT + "px;\" onclick=\"loadPost('" + tile['guid'] + "');\">\n<div id=\"" + tile['id'] + "\" class=\"tile\" style=\"height: " + TILE_HEIGHT + "px; width: " + (TILE_WIDTH+TILE_PAD) + "px;\"\"><img src=\"" + tile["thumb"] + "\"/></div>";
	out += "<div id=\"" + tile['id'] + "_hover\" class=\"tile_hover\" style=\"background-color: " + TILE_BG_COLOR[tile['category']] + "; width: " + (TILE_WIDTH+TILE_PAD) + "px; height: " + TILE_HEIGHT + "px;\"\">";
	out += "<div class=\"tile_category\" style=\"color: " + TILE_FONT_COLOR[tile['category']] + ";\">" + tile['category'] + "</div>";
	out += "<div class=\"tile_date\" style=\"color: " + TILE_FONT_COLOR[tile['category']] + ";\">" + tile['date'] + "</div>";
	out += "<hr class=\"separator_bar\" style=\"color: " + TILE_FONT_COLOR[tile['category']] + ";\"/>";
	out += "<div class=\"tile_title\"><a href=\"" + tile['guid'] + "\" style=\"color: " + TILE_FONT_COLOR[tile['category']] + ";\">"  + tile['title'] + "</a></div>";
	out +="</div></div></div>";
	return out;
}

function createPrevButton() {
	var out = "<div id=\"scroll_left\" style=\"height: 50px; top: " + Math.floor(CONTAINERH/2) + "px; left: 20px;\"><div class=\"arrow\"><a class=\"prev browse left\" onclick=\"prevSet();\"><img src=\"/wp-content/themes/blackbird/images/pies_prev.png\" border=\"0\"></a></div></div>";
	return out;
}

function createNextButton() {
	var out = "<div id=\"scroll_right\" style=\"height: 50px; top: " + Math.floor(CONTAINERH/2) + "px; right: 40px;\"><div class=\"arrow\"><a class=\"next browse right\" onclick=\"nextSet();\"><img src=\"/wp-content/themes/blackbird/images/pies_next.png\" border=\"0\"></a></div></div></div>";
	return out;
}

function createLogoTile() { 
	var vAlign = TILE_HEIGHT > 300 ? Math.floor((TILE_HEIGHT-300)/2) : 0;
	var d = new Date();
	var out = "<div class=\"logo_tile\" style=\"width: " + (TILE_WIDTH+TILE_PAD) + "px; height: " + TILE_HEIGHT + "px; margin-bottom: " + ORIGINAL_HPAD + "px; margin-right: " + ORIGINAL_PAD + "px;\"><center><div class=\"logo_container\"><div id=\"logo_date\">" + getMonth(d.getMonth()) + " " + d.getDate() + ", " + (d.getYear()+1900) + "</div><a href=\"" + HOME_URL + "\" title=\"" + BLOG_NAME + "\" rel=\"home\"><img src=\"/wp-content/themes/blackbird/images/logotile.jpg\" style=\"margin-top: " + vAlign + "px;\"></center></a></div></div>";
	return out;
}

function onSetChange() {
	//if user has viewed 2/3 of the sets then fetch more
	if (BOX_CNT >= (numOfBoxes/(3/10))*2) {
		
	}
}

function prevSet() {
	BOX_CNT = BOX_CNT != 0 ? --BOX_CNT : numOfBoxes;
	onSetChange();
}
function nextSet() {
	BOX_CNT = BOX_CNT < numOfBoxes ? ++BOX_CNT : 0;
	onSetChange();
}

function getElementsByClass( searchClass, domNode, tagName) { 
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) { 
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1) 
			el[j++] = tags[i];
	} 
	return el;
}

function loadPost(url) { window.location.href=url; }

/**
Pagination Buttons
Requires variables prev_div & next_div be set to the pagination divs
**/
var MOUSE_MARGIN_PERCENTAGE = .1;
var startMouseMove = false;
var firstTime = true;
function onMouseMoveInMosaic(e) {
	if (!(e.pageX < window.innerWidth * MOUSE_MARGIN_PERCENTAGE || e.pageX > window.innerWidth - (window.innerWidth * MOUSE_MARGIN_PERCENTAGE))) { onMouseOutOfMosaic(e); return; }
	startMouseMove = true;
	if (e.pageX < window.innerWidth * MOUSE_MARGIN_PERCENTAGE) {
		if (firstTime) { firstTime = false; $('#scroll_left').fadeTo(300, .9); }
		$('#scroll_left').css('top', ((e.pageY - MOSAIC.offsetTop) - Math.ceil(parseInt($('#scroll_left').css('height'))/2)-10) + "px");
	}
	else if (e.pageX > window.innerWidth - (window.innerWidth * MOUSE_MARGIN_PERCENTAGE)) {
		if (firstTime) { firstTime = false; $('#scroll_right').fadeTo(300, .9); }
		$('#scroll_right').css('top', ((e.pageY - MOSAIC.offsetTop) - Math.ceil(parseInt($('#scroll_right').css('height'))/2)-10) + "px");
	}
	MOUSE_MARGIN_PERCENTAGE = .15;
}

function onMouseOutOfMosaic(e) {
	if (!startMouseMove) return;
	
	//reset pagination divs
	var position = "100";
	if (MOSAIC != null)
		position = Math.ceil(CONTAINERH / 2);
		
	$('#scroll_left').fadeTo(300,.6);
	$('#scroll_left').animate({top: (position) + "px"}, 300);
	
	$('#scroll_right').fadeTo(300,.6);
	$('#scroll_right').animate({top: (position) + "px"}, 300);
	
	
	firstTime = true;
	startMouseMove = false;
	MOUSE_MARGIN_PERCENTAGE = .1;
}

function getMonth(m) {
	var months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec' ];
	return m > 0 && m < 12 ? months[m] : months[0];
}