var curPhotoThumb;
var selectedPhotoUrl;
var photoSelected = false;
var cropAspectRatio = 1;
var jcrop_api;

$(document).ready(function(){
	var pageID = $('body').attr('id');
	if (pageID == "cropper"){
	
		cropAspectRatio = minWidth/minHeight;
		
		//Set the photo select min dimensions
		PhotoAPI.minWidth = minWidth;
		PhotoAPI.minHeight = minHeight;

		//initialize Instagram API
		//initIGApi();	
	
		//Bind buttons
		$("#btn-change").bind("click",showAddOptions);
		$("#btn-upload").bind("click",uploadPhotoModal);
		
		$("#btn-facebook").bind("click",function (){
			buildFbPhotos(0);
		});
		$("#btn-instagram").bind("click",function (){
			buildIgPhotos(0);
		});	

		//If there's no image coming in go ahead and show the add options modal
		showAddOptions();
	}else if (pageID == "uploader"){
		$("input:file").change(function (){
			var fileName = $(this).val();
			$("#btn-upload").show();
		});	
		
		$("#btn-upload").bind("click",function (){
			var $btnHolder = $('#upload-btns-holder');
			$('#upload-btns-wrap', $btnHolder).addClass('hidden');
			$('#activity-indicator', $btnHolder).removeClass('hidden');
			$('#form1').submit();
		});
	}
});

/*======================================================================================
MODALS
======================================================================================*/
function showAddOptions(){
	if (photoSelected){
		allowModalClose = true;
		modalOpacity = 0.4;
	}else{
		modalOpacity = 0.2;
		allowModalClose = false;
	}
	//Launch the add photo options
	$.colorbox({
		overlayClose:allowModalClose,
		transition:"none", 
		opacity:0.2,
		width:260, 
		inline:true,
		href:"#photo-add-modal",
		onLoad:function(){
			$('#cboxClose').remove();
		},
		onClosed:function(){ 
			addPhotoModalCheck();
		}
	});	
}
function uploadPhotoModal(){
	$.colorbox({
		overlayClose:false,
		open:true,
		opacity:0.5,
		iframe:true, 
		width:500, 
		height:235,
		href:"image_uploader.php?dim=" + minWidth + "x" + minHeight + "&fitBoxSize=" + fitBoxSize,
		onLoad:function(){
			$('#cboxClose').remove();
		},		
		onClosed:function(){ 
			addPhotoModalCheck();
		}		
	});
}
function closeModal(){
	$.fn.colorbox.close();	
}
function addPhotoModalCheck(){
	//If they haven't selected a photo lock the add selection
	if (photoSelected){
		$("#btn-change").show();
	}else{
		showAddOptions();
	}	
}

function enableCropSave(){
	$("#btn-save").unbind("click");
	$("#btn-save").show();
	$("#btn-save").bind("click",submitImage);
	$("#btn-save").removeClass("disabled");
}

function disableCropSave(){
	$("#btn-save").unbind("click");
	$("#btn-save").addClass("disabled");
}

function updateImageCropTool(img,srcImgW,srcImgH){
	//Can we force this to be smaller than actual crop space?
	var imgMaxCropDimension = 540;
	var imgCropWidth = srcImgW;
	var imgCropHeight = srcImgH;
	
	//Use width
	if (srcImgW > srcImgH){
		if (imgCropWidth > imgMaxCropDimension){imgCropWidth = imgMaxCropDimension;}
		imgCropText = " width='"+ imgCropWidth +"'";
	}else{
		if (imgCropHeight > imgMaxCropDimension){imgCropHeight = imgMaxCropDimension;}	
		imgCropText = " height='"+ imgCropHeight +"'";
	}

	//Got ourselves a new image for crop tool
	$("#selectedPhotoDest").html('<img id="crop-image" '+imgCropText+'  />');	
	$("#img").val(img);
	
	//Hand off to image crop tool
	prepImageCrop(img);
}
function prepImageCrop(imgUrl){
	photoSelected = true;

	// Create variables (in this scope) to hold the API and image size
	var curW = 0;
	var curH = 0;
	var origW = 0; 
	var origH = 0;
	var actualX = 0;
	var actualY = 0;
	var actualW = 0;
	var actualH = 0;
	var crop;
	var hasInit = false;
	var hasImageLoaded = false;
	
	// add callback for when image is loaded
	$('#crop-image').imagesLoaded(function() {		
		hasImageLoaded = true;	
		initCrop();
	});
	// set the src attribute on the img to kick off loading.
	$('#crop-image').attr("src", imgUrl);
	
	function initCrop(){
		if (hasInit == false && hasImageLoaded == true){
			hasInit = true;
			// Calculate the size of the original image
			var img = $("#crop-image"); // Get my img elem
			$("<img/>") // Make in memory copy of image to avoid css issues
				.load(function() {
					origW = this.width; // Note: $(this).width() will not work for in-memory images.
					origH = this.height;
					curW = $('#crop-image').width();
					curH = $('#crop-image').height();
					$("#origImgDim").val(origW + "x" + origH);
					//We need to calculate the minimum allowable crop
					getActualCrop();
					//setup Jcrop now that all that's sorted out
					setupJcrop();
				})
				.attr("src", $(img).attr("src"));
		}
	}	
	function setupJcrop(){
		var aspectRatio = origW/curW;
		var initialWidth = parseInt(minWidth/aspectRatio,10) + 1;
		var initialHeight = parseInt(minHeight/aspectRatio,10) + 1;
		//If crop is too small let's make sure we make it fill the width
		if (initialWidth < 200 || initialHeight < 200){
			initialWidth = parseInt(initialWidth * aspectRatio);
			initialHeight = parseInt(initialHeight * aspectRatio);
		}
		if (initialWidth > minWidth){initialWidth = minWidth;}
		if (initialHeight > minHeight){initialHeight = minHeight;}		
		
		console.log(initialWidth + "x" + initialHeight);
	
		$('#crop-image').Jcrop({
			setSelect: [ 0, 0, initialWidth, initialHeight ],
			onChange: updatePreview,
			onSelect: updatePreview,
			aspectRatio: cropAspectRatio
		},function(){
			// Store the API in the jcrop_api variable
			jcrop_api = this;
			setTimeout(updatePreview, 150);
			setTimeout(updatePhotoInstructions, 250);
		});
	}

	function updatePreview(c){	
		crop = c;
		if (c && c.w ) { 
			if ( parseInt(c.w) > 0 ){
				// Set all the values in HTML fields since we'll need to process on server side
				$("#cropXY").val(Math.round(c.x) + "," + Math.round(c.y));
				$("#cropDim").val(Math.round(c.w) + "x" + Math.round(c.h));
				$("#displayImgDim").val(curW + "x" + curH);
				$("#origImgDim").val(origW + "x" + origH);
				//console.log(curW + "x" + curH + ":" + origW + "x" + origH + ":" + Math.round(c.w) + "x" + Math.round(c.h));
				//We need to calculate the minimum allowable crop
				getActualCrop();
				//update instructions
				updatePhotoInstructions();
			}else{
			}
		}
	};
	function getActualCrop(){
		//console.log('getActualCrop');
		if (crop && curW && origW){
			var aspectRatio = origW/curW;
			actualW = Math.round(aspectRatio * crop.w);
			actualH = Math.round(aspectRatio * crop.h);
			actualX = Math.round(aspectRatio * crop.x);
			actualY = Math.round(aspectRatio * crop.y);
			//If the width or height is the same size as the minCrop we need to adjust for within 1 pixel (crop tool pixel apparently won't let final pixel go)
			if (minWidth == origW && (minWidth-1) == actualW){actualW = minWidth;actualH = minHeight;}
			if (minHeight == origH && (minHeight-1) == actualH){actualW = minWidth;actualH = minHeight;}
			
			$("#actualCropDim").val(actualW + "x" + actualH);
			$("#actualCropXY").val(actualX + "," + actualY);
			
			/*
			console.log('crop: '+crop.x+', '+crop.y+", "+crop.w+', '+crop.h);
			console.log('curW: '+curW);
			console.log('origW: '+origW);
			console.log('aspectRatio: '+aspectRatio);
			console.log('actualW: '+actualW);
			console.log('actualH: '+actualH);
			console.log('actualX: '+actualX);
			console.log('actualY: '+actualY);
			console.log(actualW + "x" + actualH);
			*/
			
		}else{
			/*log("NOT crop, or NOT (curW && origW).");
			log("crop:",crop);
			log("curW:",curW);
			log("origW:",origW);*/
		}
	};		
}

function updatePhotoInstructions(){
	if (photoSelected){
		//determine which secondary message to show - success or error
		var cropAr = $('#actualCropDim').val().split('x');
		if (cropAr.length < 2) {
			//Error processing image
			cropError();
		}else if ((parseInt(cropAr[0]) < minWidth || parseInt(cropAr[1]) < minHeight)) {
			cropError();
		} else if ((parseInt(cropAr[0]) >= minWidth && parseInt(cropAr[1]) >= minHeight)) {
			cropOK();
		} else {
			//Unknown error
			console.log("unknown crop error");
			cropError();
		}
	}
	function cropError(){
		$(".instructions .messaging .success").addClass('disabled');
		$(".instructions .messaging .error").removeClass('disabled');
		disableCropSave();
		$("#selectedPhotoDest .jcrop-holder").css("backgroundColor", "red");		
	}
	function cropOK(){
		$(".instructions .messaging .success").removeClass('disabled');
		$(".instructions .messaging .error").addClass('disabled');
		enableCropSave();
		$("#selectedPhotoDest .jcrop-holder").css("backgroundColor", "black");		
	}
}

function submitImage(){
	showLoadingScrim();
	$.ajax({
		type: "POST",
		url: "save_photo_crop.php",
		data: {
			img:$('#img').val(),
			cropXY:$('#cropXY').val(),
			cropDim:$('#cropDim').val(),
			origImgDim:$('#origImgDim').val(),
			displayImgDim:$('#displayImgDim').val(),
			actualCropDim:$('#actualCropDim').val(),
			actualCropXY:$('#actualCropXY').val(),
			desiredImgDim: (minWidth + "x" + minHeight)
		},
		success: function(data) {		
			//Point user to their newly created story
			var errorMsg = $(data).find('#errorMsg').html();
			var imgURL = $(data).find('#imgURL').html();
			
			if (imgURL == undefined){
				errorScrim("Unknown error.");
			}else if (imgURL.length > 0){
				//errorScrim("Save successful:" + imgURL);
				
				parent.handleImageCrop(destID,imgURL);
				
			}else if (errorMsg && errorMsg.length > 0){
				errorScrim("There was a problem processing crop: " + errorMsg);
			}else{
				errorScrim("Unknown error.");
			}			
		},
		error: function(){
			errorScrim("There was a problem processing form. Please try again.");
		}
	});
}
function showLoadingScrim(){
	//Launch the modal
	$.colorbox({
		overlayClose:false,
		href:"#loading-modal",
		transition:"none", 
		opacity:0.5,
		width:350,
		inline:true,
		onLoad:function(){
			$('#cboxClose').remove();
		},		
		onClosed:function(){ 
		}
	});	
}

/**
 * Handle photo API requests
 */
function buildFbPhotos(pageNum) {
	if (!pageNum) pageNum = 0;
	PhotoAPI.getFbPhotos(pageNum, function(response){
		if (response.status == "success"){
			if (response.totalPages == 0){
				errorScrim("No photos found that match the minimum dimensions.");
			}else{
				updatePhotoScrim("#photo-select-modal", "USE PHOTO FROM FACEBOOK", response.result, response.curPage, response.totalPages, "buildFbPhotos");
			}
		} else {
			errorScrim(response.result);
		}
	});
}
function buildIgPhotos(pageNum) {
	if (!pageNum) pageNum = 0;
	PhotoAPI.getIgPhotos(pageNum, function(response){
		if (response.status == "success"){
			if (response.totalPages == 0){
				errorScrim("No photos found that match the minimum dimensions.");
			}else{		
				updatePhotoScrim("#photo-select-modal", "USE PHOTO FROM INSTAGRAM", response.result, response.curPage, response.totalPages, "buildIgPhotos");
			}	
		} else {
			errorScrim(response.result);
		}
	});
}
function errorScrim(message){
	container = "#error-modal";
	$(container).find(".header").html("Error");
	$(container).find("#messaging").html(message);
	
	//Launch the modal
	$.colorbox({
		href:"#error-modal",
		transition:"none", 
		opacity:0.5,
		width:350,
		inline:true,
		onLoad:function(){
			$('#cboxClose').remove();
		},		
		onClosed:function(){ 
			addPhotoModalCheck();
		}
	});		
}
function updatePhotoScrim(container,title,data,currentPage,totalPages,callbackFunc){
	var arrowClass, leftArrow, rightArrow, paginateLink = "";
	// Show the left arrow?
	leftArrow = (totalPages == 1 || currentPage == 0) ? "<div class=\"left disabled\">&lt;</div>" : "<div class=\"left\" onclick=\""+ callbackFunc +"("+ (currentPage-1) +");return false;\">&lt;</div>";
	// Show the right arrow?
	rightArrow = (totalPages <= 1 || currentPage >= totalPages - 1) ? "<div class=\"right disabled\">&gt;</div>" : "<div class=\"right\" onclick=\""+ callbackFunc +"("+ (currentPage+1) +");return false;\">&gt;</div>";
	$(container).find(".header").html(title);
	var scrimHTML = '<div id="photo-select-container">' + leftArrow + '<div id="photo-select">' + data + '</div>' + rightArrow + '</div></div>';
	$(container).find("#photo-select-holder").html(scrimHTML);
	
	//Launch the modal
	$.colorbox({
		overlayClose:false,
		href:"#photo-select-modal",
		transition:"none", 
		opacity:0.5,
		width:"90%",
		inline:true,
		onLoad:function(){
			$('#cboxClose').remove();
		},		
		onClosed:function(){ 
			addPhotoModalCheck();
		}
	});	
	
	//Add click event to buttons
	$(container).find(".button").click(function(){handlePhotoSelect(this);});
}
function handlePhotoSelect(btn){
	console.log('data-source: '+$(btn).attr('data-source'));
	console.log('data-url-large: '+$(btn).attr('data-url-large'));
	console.log('data-dim: '+$(btn).attr('data-dim'));
	
	//validate status of current button.  clear it if needed.  make this the current button.
	if (isCurPhotoThumb(btn)){
		//de-select the button.
		curPhotoThumb.children(".photoThumb").removeClass('active');
		//no active button anymore
		curPhotoThumb = null;
		return;
	}
	//deslect the current button
	if(curPhotoThumb){
		curPhotoThumb.children(".photoThumb").removeClass('active');
	}
	//set the new current button
	curPhotoThumb = $(btn);
	//activate it (it should already be activated)
	curPhotoThumb.children(".photoThumb").addClass('active');
	
	//end back photo to caller
	selectedPhotoUrl = curPhotoThumb.attr('data-url-large');
	
	//Get dimensions of image
	var srcDimArray = $(btn).attr('data-dim').split("x");
	updateImageCropTool(selectedPhotoUrl,srcDimArray[0],srcDimArray[1]);
	$.fn.colorbox.close();	
	
}
function isCurPhotoThumb(btn){
	if (!curPhotoThumb) return false;
	return (curPhotoThumb[0] === $(btn)[0]);
}
function removePhotoRoll(btn){
	//verify this isn't the active button first
	if (isCurPhotoThumb(btn)) return;
	$(btn).children(".photoThumb").removeClass('active');
}
/* FACEBOOK LOG IN */
function promptFbLogin(){
	if (FBUtil.uid == ''){
		requestLogin(null, function(){ document.location.reload(true) });
	}else{
		/* log("FBUtil.uid != ''"); */
	}
}
/* FACEBOOK INIT */
window.fbAsyncInit = function() {
	FB.init({
	appId  : FB_APP_ID,
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true,  // parse XFBML
		channelUrl  : ROOT_LOCATION+'fb_channel.php' // custom channel
	});
	window.setTimeout(function() {
		FB.Canvas.setAutoGrow();
	}, 250);
	getLoginStatus({},fbStatusCallback);
};

//FB check is DONE... gimme some action
function fbStatusCallback(msg){
	//log("FB Status Callback working:" + msg);
	galleryLoad();
}
(function(d){
	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/en_US/all.js";
	ref.parentNode.insertBefore(js, ref);
}(document));
	
function initFacebookJSApi(){
	
}	
/* INSTAGRAM INIT */
function initIGApi(){
	//Instagram init
	IG.init({
		client_id: IG_APP_ID,
		check_status: true, // check and load active session
		cookie: true // persist a session via cookie
	});
	IG.getLoginStatus();	
}