/* ================================================================================
 *
 * YAMAHA Y2 PROJECT
 * - grid.js
 *
================================================================================ */
var trace=function(){console.log(arguments);};
var jsonData;
var $container;
var info_ua;

var indexAry;
var elementsAryMain = [];
var elementsAryPhoto = [];
var elementsAryEvent = [];
var currentCategory = "";
var bTopPage;
var bLoadCompleteMainJson = false;
var bLoadCompletePhotoXml = false;
var checkBool;
var loadNum;
var bNowLoadMoreGrid;
var innerCategory;
var innerSubCategory;
var innerPageUrl;

$(function(){
});



/* ================================================================================
Document Setup
================================================================================ */
$( document ).ready( function(){
	info_ua = navigator.userAgent.toLowerCase();
	$container = $( "#gridContainer" );
	
	// Check page type
	var bNeedJsonContents = false;
	if( getLocation().split('/').length > 5 && ( getLocation().split('/')[3] == "project" || getLocation().split('/')[3] == "event" ) ) {
		innerCategory = getLocation().split('/')[3];
		innerSubCategory = getLocation().split('/')[4];
		innerPageUrl = "/" + getLocation().split("/").slice(3).join("/");
		bNeedJsonContents = true;
	} else if( getLocation().split('/').length == 5 && getLocation().split('/')[3] == "event" ) {
		innerCategory = getLocation().split('/')[3];
		innerSubCategory = "";
		bNeedJsonContents = true;
	}
	
	if( getLocation().split('/').length <= 4 || bNeedJsonContents ) {
		if( getLocation().split('/').length <= 4 ) {
			bTopPage = true;
			checkBool = setInterval("checkLoadComplete()", 10);
		
			$container.append("<div id='dummy' style='margin-top:30px;height:600px;color:#555555;text-align:center;font-family:" + '"Avenir LT W01 95 Black"' + ";font-size:14px;font-weight:normal;'><h2>Now loading...</h2></div>");
	
			// Load main JSON
			$.getJSON( "data.json", function(json) {
				jsonData = json;
				//console.log("jsonData " + jsonData);
				sortPriority();
				bLoadCompleteMainJson = true;
			});
	
			// Load photo XML
			var feedUrl;
			if(getLocation().slice(0, 4) == "file") feedUrl = "http://instagr.am/tags/y2pj/feed/recent.rss";
			else feedUrl = "shared/js/crossdomain.php?url=http://instagr.am/tags/y2pj/feed/recent.rss";
			$.ajax({
				url			:feedUrl,
				async		:true,
				cache		:false,
				dataType	:"xml",
				success:function(xml){
					makePhotoItem(xml);
				},
				error:function(XMLHttpRequest, textStatus, errorThrown){
					elementsAryPhoto = [];
					bLoadCompletePhotoXml = true;
				}
			});
		
			$(window).scroll(function(){
				var bottom = $(window).scrollTop() + $("html").attr('clientHeight');
				if( bottom >= $(document).height() - 40 ) {
					makeMoreGrid();
				}
			});
		
		} else {
			bTopPage = false;
			$container.css("padding-top","20px");
			var categoryJsonPath = getLocation().split("/").slice(3, 5).join("/") + "/data.json";
			var jsonUrl;
			if( innerCategory == "project" ) jsonUrl = "data.json";
			else if( innerCategory == "event" ) jsonUrl = "/event/data.json";
			$.getJSON( jsonUrl, function(json) {
				jsonData = json;
				sortPriority();
				bLoadCompletePhotoXml = true;
				bLoadCompleteMainJson = true;
				makeMainItem("");
			});
		}
	}
	
});

function checkLoadComplete() {
	if( bLoadCompleteMainJson && bLoadCompletePhotoXml ) {
		clearInterval( checkBool );
		makeMainItem("");
	}
}



/* ================================================================================
Generate main item
================================================================================ */
function makeMainItem(target) {
	$container.empty();
	currentCategory = target;
	loadNum = 0;
	
	elementsAryMain		= new Array();
	indexAry			= [];
	indexAry			= makeIndexAry();
	var loopCnt			= jsonData.length;
	var addTotalCnt		= 0;
	var addMainCnt		= 0;
	var addPhotoCnt		= 0;
	
	if( bTopPage && ( currentCategory == "" || currentCategory == "PHOTO" ) )
		loopCnt += elementsAryPhoto.length;
	
	for( var i = 0; i < loopCnt; i++ ) {
		var gridData;
		var setWidth;
		var setHeight;
		var str_thumb;
		var str_append= "";
		if( bTopPage ) {
			// top page
			var pushIndex;
			var blockClass;
			
			if( currentCategory == "" || currentCategory == "PHOTO" ) {
				if( i % 5 == 4 || addMainCnt == jsonData.length || currentCategory == "PHOTO" ) {
					// add PHOTO
					if( addPhotoCnt < 20 ) {
						pushIndex = getIndexByElements( 1 );
						str_append = elementsAryPhoto[addPhotoCnt];
						addPhotoCnt++;
						elementsAryMain[pushIndex] = str_append;
					}
				} else if( addMainCnt < jsonData.length ) {
					gridData = jsonData[addMainCnt];
					pushIndex = getIndexByElements( Number( gridData.grid ) );
					setWidth = 230 * Number( gridData.grid ) + 20 * ( Number( gridData.grid ) - 1 );

					if( gridData.grid == "1" )		blockClass = "one";
					else if( gridData.grid == "2" ) blockClass = "two";

					if( String( gridData.imgUrl ).length > 1 ) str_thumb = '<img class="thumb" src="' + gridData.imgUrl + '" width="' + String( setWidth ) + '" height="230"/>';
					else str_thumb = '<div class="thumbHeader"></div>';

					elementsAryMain[pushIndex] = getDivGridItem(blockClass, gridData.category, gridData.url, str_thumb, gridData.title, gridData.text, gridData.category, gridData.date);
					addMainCnt++;
				}
			} else {
				// select category
				if( currentCategory == String( jsonData[i].category ) ) {
					gridData = jsonData[i];
					pushIndex = getIndexByElements( Number( gridData.grid ) );
					setWidth = 230 * Number( gridData.grid ) + 20 * ( Number( gridData.grid ) - 1 );

					if( gridData.grid == "1" )		blockClass = "one";
					else if( gridData.grid == "2" ) blockClass = "two";

					if( String( gridData.imgUrl ).length > 1 ) str_thumb = '<img class="thumb" src="' + gridData.imgUrl + '" width="' + String( setWidth ) + '" height="230"/>';
					else str_thumb = '<div class="thumbHeader"></div>';

					elementsAryMain[pushIndex] = getDivGridItem(blockClass, gridData.category, gridData.url, str_thumb, gridData.title, gridData.text, gridData.category, gridData.date);
				}
			}
		} else {
			if( innerCategory == "project" ) {
				gridData = jsonData[i];
				if( String( gridData.imgUrl ).length > 1 ) str_thumb = '<img class="thumb" src="' + gridData.imgUrl + '" width="136px" height="136px"/>';
				else str_thumb = '<div class="thumb"><p class="projectCategory">' + gridData.projectCategory + '</p></div>';
				str_append = '<div id="gridItem" class="one '
					+ gridData.category		+ '"><a href="'
					+ gridData.url			+ '"><div id="topArea">'
					+ str_thumb				+ '<p class="title">'
					+ gridData.title		+ '</p></div><div id="bottomArea"><p class="cat">'
					+ gridData.category		+ '</p><p class="date">'
					+ gridData.date			+ '</p></div></a></div>';
				elementsAryMain[i] = str_append;
			} else if( innerCategory == "event" ) {
				if( innerSubCategory != "" ) {
					// event inner
					gridData = jsonData[i];
					if( gridData.eventCategory == innerSubCategory && innerPageUrl != gridData.url ) {
						if( String( gridData.imgUrl ).length > 1 ) str_thumb = '<img class="thumb" src="' + gridData.imgUrl + '" width="136px" height="136px"/>';
						else str_thumb = '<div class="thumb"><p class="projectCategory">' + gridData.projectCategory + '</p></div>';

						str_append = '<div id="gridItem" class="one '
							+ gridData.category		+ '"><a href="'
							+ gridData.url			+ '"><div id="topArea">'
							+ str_thumb				+ '<p class="title">'
							+ gridData.title		+ '</p></div><div id="bottomArea"><p class="cat">'
							+ gridData.category		+ '</p><p class="date">'
							+ gridData.date			+ '</p></div></a></div>';
						elementsAryMain[i] = str_append;
					}
				} else {
					// event top
					gridData = jsonData[i];
					if( String( gridData.eventCategory ).length > 1 ) {
						var chkAry = gridData.url.split("/");
						if( chkAry[chkAry.length - 2] != String( gridData.eventCategory ) || String( chkAry[chkAry.length - 1] ).length != 0 ) {
							
							if( String( gridData.imgUrl ).length > 1 ) str_thumb = '<img class="thumb" src="' + gridData.imgUrl + '" width="136px" height="136px"/>';
							else str_thumb = '<div class="thumb"><p class="projectCategory">' + gridData.category + '</p></div>';
							str_append = '<div id="gridItem" class="one '
								+ gridData.category		+ '"><a href="'
								+ gridData.url			+ '"><div id="topArea">'
								+ str_thumb				+ '<p class="title">'
								+ gridData.title		+ '</p></div><div id="bottomArea"><p class="cat">'
								+ gridData.category		+ '</p><p class="date">'
								+ gridData.date			+ '</p></div></a></div>';
							elementsAryEvent.push({target:gridData.eventCategory, element:str_append});
						}

					}
				}
					
			}
		}
		
		addTotalCnt++;
	}
	
	if( !bTopPage && innerCategory == "event" && innerSubCategory == "" ) {
		// event top
		fixAllGridEvent();
	} else {
		fixAllGrid();
	}
}

function sortPriority() {
	var pValAry = ["3", "2", "1", ""];
	var resultAry = [[], [], [], []];
	for( var i = 0; i < pValAry.length; i++ ) {
		for( var s = 0; s < jsonData[0].items.length; s++ ) {
			if( pValAry[i] == jsonData[0].items[s].priority ) resultAry[i].push(jsonData[0].items[s]);
		}
	}
	jsonData = resultAry[0].concat(resultAry[1], resultAry[2], resultAry[3]);
}

function getDivGridItem(_blockClass, _category, _url, _str_thumb, _title, _text, _category, _date) {
	return(
		'<div id="gridItem" class="'
		+ _blockClass	+ ' '
		+ _category		+ '"><a href="'
		+ _url			+ '"><div id="topArea">'
		+ _str_thumb	+ '<p class="title">'
		+ _title		+ '</p><p class="content">'
		+ _text			+ '</p></div><div id="bottomArea"><p class="cat">'
		+ _category		+ '</p><p class="date">'
		+ _date			+ '</div></a></div>'
	);
}



/* ================================================================================
Generate photo item
================================================================================ */
function makePhotoItem(xml) {
	elementsAryPhoto = [];
	var str_path;
	
	if( getBrowserName() == "Firefox" ) str_path = "media\\:credit";
	else if( getBrowserName() == "Safari" || getBrowserName() == "Chrome" ) str_path = "credit";
	else str_path = "media\\:credit";
	
	$(xml).find("item").each( function(i) {
		if(
			elementsAryPhoto.length < 20
			|| ( $( this ).find( str_path ).text() == "y2project"
			|| $( this ).find( str_path ).text() == "gentamura"
			|| $( this ).find( str_path ).text() == "norio_airoplane"
			|| $( this ).find( str_path ).text() == "sudacchi"
			|| $( this ).find( str_path ).text() == "aito" )
		) {
			var str_date = $( this ).find( 'pubDate' ).text().slice( 5, 16 );
			str_date = String( str_date.slice(3, 7) + str_date.slice(0, 3) + str_date.slice(7) ).replace( / /g, "." );
			var _text = $( this ).find( 'title' ).text();
			if( getBrowserName() == "Safari" || getBrowserName() == "Chrome" ) _text = _text.slice( _text.length / 2 );
			elementsAryPhoto.push(
				'<div id="gridItem" class="one PHOTO">'
				+ '<div id="topArea"><img class="thumb" src="'
				+ $( this ).find( 'guid' ).text().replace( "_7.jpg", "_6.jpg" )
				+ '" width="230" height="230"/><p class="title">Y2 on INSTAGRAM</p><p class="content">'
				+ _text
				+ '</p></div><div id="bottomArea"><p class="cat">PHOTO</p><p class="date">'
				+ str_date + '</div></div>'
			);
		}
	});
	bLoadCompletePhotoXml = true;
}


/* ================================================================================
Other function
================================================================================ */
function fixAllGrid() {
	var indexCnt = 0;
	bNowLoadMoreGrid = false;

	var tmpNumX = 4;
	if( bTopPage == false ) tmpNumX = 5
	for( var i = 0; i < elementsAryMain.length; i++ ) {
		if( String( elementsAryMain[i] ).length > 0 && $(elementsAryMain[i]).attr("class") != undefined ) {
			var cls = $(elementsAryMain[i]).attr("class");
			if( cls.indexOf("one") != -1 ) {
				if( indexCnt % tmpNumX != (tmpNumX-1) ) elementsAryMain[i] += '<div id="gridSpacer"></div>';
				indexCnt += 1;
			} else if( cls.indexOf("two") != -1 ) {
				if( indexCnt % tmpNumX != (tmpNumX-2) ) elementsAryMain[i] += '<div id="gridSpacer"></div>';
				indexCnt += 2;
			}
		}
	}
	cleanAry();

	if( elementsAryMain.length == 0 ) {
		$container.append("<div id='message' style='display:none;margin-top:30px;height:150px;color:#555555;text-align:center;font-family:" + '"Avenir LT W01 95 Black"' + ";font-size:14px;font-weight:normal;'><h2>No item</h2></div>");
		$( "#message" ).fadeIn( 500 );
	} else {
		var a = [];
		for( var s = 0; s < elementsAryMain.length; s++ ) {
			if( s < 12 ) {
				a.push(elementsAryMain[s]);
				loadNum++;
			} else {
				break;
			}
		}
		
		$container.append( a.join("") );
		$( "#gridContainer > #gridItem" ).each( function(i) {
			$( this ).delay( i * 90 ).fadeIn( 400 );
		});
	}
}

function fixAllGridEvent() {
	var events = {};
	for( var i = 0; i < elementsAryEvent.length; i++ ) {
		if( elementsAryEvent[i].target in events ) {
			if( events[elementsAryEvent[i].target] < 3 ) {
				events[elementsAryEvent[i].target] += 1;
				$( "#grid_" + elementsAryEvent[i].target ).append( elementsAryEvent[i].element + '<div id="gridSpacer"></div>' );
			} else if( events[elementsAryEvent[i].target] == 3 ) {
				events[elementsAryEvent[i].target] += 1;
				$( "#grid_" + elementsAryEvent[i].target ).append( elementsAryEvent[i].element );
			}
		} else {
			events[elementsAryEvent[i].target] = 1;
			$( "#grid_" + elementsAryEvent[i].target ).append( elementsAryEvent[i].element + '<div id="gridSpacer"></div>' );
		}
	}
}

function getIndexByElements(itemLength){
	var index;
	if( itemLength == 1 ) {
		index = indexAry[0];
		indexAry = indexAry.slice(1);
	} else if( itemLength == 2 ) {
		var deleteIndex;
		for( var i = 0; i < indexAry.length; i++ ) {
			if( indexAry[i] % 4 < 3 && indexAry[i + 1] - indexAry[i] == 1 ) {
				deleteIndex = i;
				index = indexAry[i];
				break;
			}
		}
		indexAry.splice( deleteIndex, 2 );
	}	
	return(index);
}

function makeMoreGrid() {
	if( bNowLoadMoreGrid == false && loadNum < elementsAryMain.length ) {
		bNowLoadMoreGrid = true;
		var a = [];
		var tmpCntMin = loadNum;
		var bEndGrid = false;
		for( var i = 0; i < elementsAryMain.length; i++ ) {
			if( i > tmpCntMin - 1 && bEndGrid == false && elementsAryMain[i] != undefined ) {
				if( elementsAryMain[i].indexOf('id="gridSpacer"') != -1 ) {
					a.push(elementsAryMain[i]);
					loadNum++;
				} else {
					a.push(elementsAryMain[i]);
					loadNum++;
					bEndGrid = true;
				}
			}
		}
		
		if( a.length > 0 ) {
			$container.append( a.join("") );
			bNowLoadMoreGrid = false;
			$container.find("#gridItem:hidden").each( function(i) {
				$( this ).delay( i * 90 ).fadeIn( 400 );
			});
		}
	}
}

function makeIndexAry() {
	var a = [];
	for( var i = 0; i < 100; i++ ) {
		a.push( i );
	}
	return( a );
}
function cleanAry() {
	var a = [];
	for( var i = 0; i < elementsAryMain.length; i++ ) {
		if( elementsAryMain[i] != undefined ) a.push( elementsAryMain[i] );
	}
	elementsAryMain = a;
}
function pressCategory(target){
	currentCategory = target;
	makeMainItem(target);
}



/* ================================================================================
Utils
================================================================================ */

// get full url
function getLocation() { var str = document.URL; if(info_ua.indexOf("msie") != -1){ str = document.URL; }else{ str = location.href; } return( str ); }
function getBrowserName(){
	var aName = navigator.appName.toUpperCase();
	var uName = navigator.userAgent.toUpperCase();
	if (!('\v'=='v') && window.execScript) return "Chrome";
	if (uName.indexOf("SAFARI") >= 0) return "Safari";
	if (uName.indexOf("OPERA") >= 0) return "Opera";
	if (uName.indexOf("FIREFOX") >= 0) return "Firefox";
	if (aName.indexOf("NETSCAPE") >= 0) return "Netscape";
	if (aName.indexOf("MICROSOFT") >= 0) return "Explorer";
	return "";
}
function getBrowserVersion(){var browser=getBrowserName();var version=0;var s=0;var e=0;var appVer=navigator.appVersion;var uName=navigator.userAgent.toUpperCase();if(browser=="Safari"){s=uName.indexOf("SAFARI/",0);version=(uName.substring(s+7,s+99));if(version<400)version=1;if((version>=400)<(version<=499))version=2;if(version>=500)version=3;}if(browser=="Opera"){s=uName.indexOf("OPERA",0)+6;e=uName.indexOf(" ",s);version=parseFloat(uName.substring(s,e));}if(browser=="Firefox"){s=uName.indexOf("FIREFOX/",0);version=parseFloat(uName.substring(s+8,s+8+3));}if(browser=="Netscape"){s=appVer.indexOf(" ",0);version=eval(appVer.substring(0,s));if(version>=5)version++;}if(browser=="Explorer"){appVer=navigator.userAgent;s=appVer.indexOf("MSIE ",0)+5;e=appVer.indexOf(";",s);version=eval(appVer.substring(s,e));}return version;}