//////
//////  x54 jQuery animated portfolio
//////		- uses the "x54-json" plugin for feed



var logTicker = 0; // log counter
var logSlideTime = 300; // time it takes to slide a log message in or out
var logPersistanceTime = 1500; // time a log message with stick

var feedUrl; // URL to the feed, likely to be URL to wordpress with x54-json enabled
var templateUrl; // filled on document ready from template

var layoutId = 'splash'; // splash, home, portfolio-archive, portfolio-single, page
var historyStack = new Array(); // stack of last used queries, does not include transformToHome()

//
// USER FEEDBACK
//////////////////
function log(message, cssclass) {
	prev_id = 'log-'+logTicker;
	logTicker++;
	if(cssclass==undefined) {
		cssclass = 'log';
	}
	id = 'log-'+logTicker;

	if($('#'+prev_id).css('display')!='none') {
		$('#'+prev_id).stop().slideUp(logSlideTime);
	}

	$('#messages ul').append('<li id="'+id+'" class="'+cssclass+' filled cell" style="display: none;">'+message+'</li>');
	$('#'+id).slideDown(logSlideTime, function() {
		$('#'+id).delay(logPersistanceTime).slideUp(logSlideTime);
	});
}
function error(message, wait) {
	//console.log('!: '+message);
	if(wait==undefined) {
		wait = logSlideTime; // slide time
	}
	setTimeout(function() { log(message, 'error') }, wait);
}


//
// AJAX & historyStack
/////////
function loadApi(query, callback) {
	if(query!=undefined) {
		request = feedUrl+'?json=1&'+query;
	} else {
		request = feedUrl+'?json=1';
	}
	$('#logo img').attr('src', templateUrl+'/images/logo-snow.gif');
	log('quering api ...');
	var method = 'jsonp';
	if(method=='json') {
		$.ajax({
			type: "GET",
			url: request,
			data: "dataType=ini",
			success: function(json) {
				try {
					response = eval('('+json+')');
					savedResponse = response; // copy
					log('api status: '+response.status);
					if(callback!=undefined) {
						callback(response);
					} else if(response.type!=undefined) {
						//log('defaulting to response structure');
						loadHtml(response);
					} else {
						error('no callback');
					}
				} catch(e) {
					error('problem!');
					//console.log('!: '+e);
				}
			},
			error: function(e) {
				error('api 404');
				//console.log(request);
				//console.log(e);
			}
		});
	} else if(method=='jsonp') {
		if(callback==undefined) {
			callback = 'loadHtml';
		}
		request = request+'&callback='+callback;
		var script = document.createElement('script');
		script.setAttribute('src', request);
		script.setAttribute('type', 'text/javascript');
		document.getElementsByTagName('head')[0].appendChild(script);
	} else {
		error('unknown JSON method');
	}

	// history
	if(historyStack[0]!=query&&query!='init=exclusive') { // if the current page is not the same as the previous one
		historyStack.unshift(query);
	}
}

function loadPrev() {
	//console.log('length: '+historyStack.length);
	if(historyStack.length>1) {
		historyStack.shift();
	}
	loadApi(historyStack.shift());
}

//
// TRANSFORMERZ
/////////////////
function emptyCallback() {
}
function transformToHome(init) {
	transformOut(function() {
		transformIn('home');
	});
}

// Transform out of the current page layout, fade out content etc.
function transformOut(callback, target) {
	//console.log(layoutId+' > '+target);////console.log(' OUT: '+layoutId);
	if(callback==undefined) { callback = emptyCallback; }
	if(layoutId=='splash') {
		$('#curtain').slideUp(600, callback);
		$('#menu').delay(900).slideDown(300); // wait a bit for the splash>>home trans
	} else if(layoutId=='portfolio-archive') { // in any other case, fade content out, reset and trigger callback
		$('#preview').fadeOut(300, function() { $('#preview').remove(); });
		if(target!='portfolio-single') {
			$('#menu ul > ul').stop().slideUp(300, function() { $('#menu ul > ul').remove(); });
		}
	} else if(layoutId=='portfolio-single') {
		$('#preview').fadeOut(300, function() { $('#preview').remove(); });
		if(target!='portfolio-single'&&target!='portfolio-archive') {
			$('#menu ul > ul').stop().delay(300).slideUp(300, function() { $('#menu ul > ul').remove(); });
		}
	}
	$('#content').fadeOut(301, function() { $('#content').html(''); callback() });

}

// transform to given page layout
function transformIn(target, callback) {
	////console.log('  IN: '+target);
	$('#content').attr('class', target);
	if(target=='home') {
		if(target!=layoutId) {
			$('#navigation').delay(300).switchClass(layoutId, target, 600);
		}
	} else if(target=='page') {
		if(layoutId!=target) {
			$('#navigation').switchClass(layoutId, target, 600);
			$('#content').attr('class', target).delay(600).fadeIn(300);
		} else {
			$('#content').attr('class', target).fadeIn(300);
		}
	} else if(target=='portfolio-archive') {
		if(layoutId!=target) {
			$('#navigation').switchClass(layoutId, 'portfolio-archive', 600);
			$('#preview').attr('class', target).delay(600).fadeIn(300);
			$('#content').attr('class', target).delay(600).fadeIn(300);
			$('#menu ul > ul').delay(600).slideDown(300);
		} else {
			$('#preview').attr('class', target).fadeIn(300);
			$('#content').attr('class', target).fadeIn(300);
			$('#menu ul > ul').slideDown(300);
		}
	} else if(target=='portfolio-single') {
		if(layoutId!=target) {
			$('#navigation').switchClass(layoutId, 'portfolio-single', 600);
			$('#preview').attr('class', target).delay(600).fadeIn(300);
			$('#content').attr('class', target).delay(600).fadeIn(300);
		} else {
			$('#preview').attr('class', target).fadeIn(300);
			$('#content').attr('class', target).fadeIn(300);
		}
	}
	layoutId = target;
	$('#logo img').attr('src', templateUrl+'/images/logo-still.gif')
}

// populate the HTML from parsed json
function loadHtml(data) {

	// if the menulist was included
	if(data.menuitems!=undefined) {
		$('#menu').html('<ul></ul>'); //flush menu
			for(i = 0; i<data.menucount; i++) {
				$('#menu ul').append('<li class="button" id="menu-'+data.menuitems[i].type+'-'+data.menuitems[i].typeid+'"><a href="#" onclick="javacript:loadApi(\''+data.menuitems[i].query+'\');">'+data.menuitems[i].title+'</a></li>');
			}
		log('init complete');
	}

	// layout-specific
	if(data.type=='page') {
		transformOut(function() {
			$('#content').html('<h3>'+data.posts[0].post_title+'</h3>'+data.posts[0].post_content);
			transformIn('page');
		}, 'page');
	} else if(data.type=='category') {
			transformOut(function() {
				//$('#content').attr('class', 'portfolio-archive');
				$('#menu ul > ul').remove();
				if($('#preview').length==0) {
					$('body').append('<div id="preview" class="portfolio-archive" style="display: none;"><div style="font-size: 170pt;" class="active placeholder">&times;</div></div>');
				}
				$('#menu-'+data.type+'-'+data.typeid).after('<ul id="#submenu-'+data.type+'-'+data.typeid+'"></ul>');
				for(i = 0; i<data.posts.length; i++) {
					var tid = data.posts[i].post_type+'-'+data.posts[i].ID;
					$('#menu ul > ul').append('<li class="cell" id="subitem-'+tid+'"><a href="#" onclick="javascript:loadApi(\''+data.posts[i].query+'\');">'+data.posts[i].post_title+'</a></li>');
					if(data.posts[i].post_thumbnail!='null'&&data.posts[i].post_thumbnail!=undefined) {
						$('#preview').append('<div id="preview-'+tid+'" style="background: #eee url(\''+data.posts[i].post_thumbnail.previewsize.src+'\') center center no-repeat;" class="post-thumbnail">&nbsp;</div>');//;//$('#content').append('<div class="post button '+data.posts[i].post_type+'"><a href="#" onclick="javascript:loadApi(\''+data.posts[i].guid+'\');">'+data.posts[i].post_title+'</a></div>');
					} else {
						$('#preview').append('<div id="preview-'+tid+'" class="post-title">'+data.posts[i].post_title+'</div>');//;//$('#content').append('<div class="post button '+data.posts[i].post_type+'"><a href="#" onclick="javascript:loadApi(\''+data.posts[i].guid+'\');">'+data.posts[i].post_title+'</a></div>');

					}
				}
				$('#menu ul > ul li').mouseenter(function() {
					var id = $(this).attr('id');
					id = id.replace('subitem', 'preview');
					if(!$('#'+id).hasClass('active')) {
						$('#preview.portfolio-archive div.active').slideUp(100).removeClass('active');
						$('#'+id).slideDown(100).addClass('active');
					}
				});

				transformIn('portfolio-archive'); // we call this view "portfolio archive
			}, 'portfolio-archive');
	} else if(data.type=='single') {
		transformOut(function() {
			var i = 0;
			$('#content').html('')
				.append('<h3>'+data.posts[0].post_title+'</h3>');
			if(data.posts[0].url!=undefined) {
				$('#content').append('<div class="button" style="float: left; width: 120px;margin: 0px 40px 20px 0px;"><a href="'+data.posts[0].url[0]+'" target="_blank">Visit</a></div>');
			} else {
				//$('#content').append('<p>'+data.posts[0].meta+'</p>');
			}
			//console.log('post_content'+data.posts[0].post_content);
			if(data.posts[0].post_content!=undefined) {
				$('#content').append(data.posts[0].post_content);
			}

			$('body').append('<div id="preview" class="portfolio-single" style="display: none;"></div>');
			if(data.posts[0].post_thumbnail!='null'&&data.posts[0].post_thumbnail.largeviewsize!=undefined) {
				$('#preview')
				.css({'height': data.posts[0].post_thumbnail.largeviewsize.height+'px',
								  'lineHeight': data.posts[0].post_thumbnail.largeviewsize.height+'px'})
				.append('<div id="preview-pt" style="background: #eee url(\''+data.posts[0].post_thumbnail.largeviewsize.src+'\') center center no-repeat;" class="active">&nbsp;</div>');//;//$('#content').append('<div class="post button '+data.posts[0].post_type+'"><a href="#" onclick="javascript:loadApi(\''+data.posts[0].guid+'\');">'+data.posts[0].post_title+'</a></div>');

			} else {
				$('#preview').append('<div class="active">'+data.posts[0].post_title+'</div>');
			}

			//
			//  Go single post attachments!
			//
			if(data.posts[0].attachments!=undefined) {
				if((data.posts[0].post_thumbnail.largeviewsize!=undefined&&data.posts[0].attachments.length>=2)||
				(data.posts[0].post_thumbnail.largeviewsize==undefined&&data.posts[0].attachments.length>=1)) {
					$('#content').append('<div id="attachments"><h3>Attachments</h3></div>');
					// if has post thumb {
						$('#attachments').append('<img class="attachment-thumb" id="thumb-pt" src="'+data.posts[0].post_thumbnail.thumbviewsize.src+'" width="'+data.posts[0].post_thumbnail.thumbviewsize.width+'" height="'+data.posts[0].post_thumbnail.thumbviewsize.height+'" />');
					// }
					for(j = 0; j<data.posts[0].attachments.length; j++) {
						if(data.posts[0].attachments[j].ID!=data.posts[0].post_thumbnail.ID) {
							$('#attachments').append('<img class="attachment-thumb" id="thumb-'+(j+1)+'" src="'+data.posts[0].attachments[j].thumbviewsize.src+'" width="'+data.posts[0].attachments[j].thumbviewsize.width+'" height="'+data.posts[0].attachments[j].thumbviewsize.height+'" />');
							$('#preview').append('<div id="preview-'+(j+1)+'" style="background: #eee url(\''+data.posts[0].attachments[j].largeviewsize.src+'\') center center no-repeat;">&nbsp;</div>');
						}
					}
					$('#attachments .attachment-thumb').click(function() {
						var id = $(this).attr('id');
						id = id.replace('thumb-', '');
						if(id=='pt') {
							var height = data.posts[0].post_thumbnail.largeviewsize.height;
						} else {
							var j = id-1;
							var height = data.posts[0].attachments[j].largeviewsize.height;
						}
						if(!$('#preview-'+id).hasClass('active')) {
							$('#preview').animate({'height': height+'px'}, 300);
							$('#preview.portfolio-single div.active').slideUp(300).removeClass('active');
							$('#preview-'+id).slideDown(300, function() { $(this).css('top', '0px');}).addClass('active');//slideDown(100);//.slideDown(100).addClass('active');
						}
					});
				}
			}
			transformIn('portfolio-single');
		}, 'portfolio-single');
	} else if(data.type=='init') {
		transformOut(function() {
			transformIn('home');
		});
	} else {
		transformToHome();
		error('unknown api response'+data.type);
	}
	if(historyStack.length>1) {
		$('#back').fadeIn(300);
		$('#back a').attr('onClick', 'javascript:loadPrev();').attr('title', historyStack[0]);
	} else {
		$('#back').fadeOut(300);
	}
	log('api status: '+data.status);
}