$(document).ready(onReadyLoad);

// used by the turbo version to determine if it needs to
// save & flush on link traversal.
var dirtyDataFlag = false;
var appSave = false;

function setSaveComplete() {
    saveComplete = true;
    dirtyDataFlag = false;
}

/* Disable caching of AJAX responses */
$.ajaxSetup ({
    cache: false
});

var postFormCallback = function() {};

var previewTarget = "";

var formSubmitOptions = '';
function regenFormOptions() {
	formSubmitOptions = {
			target: '#mainColMiddle', // target element(s) to be updated with server response 
			beforeSubmit:  function() {
				$('#mainColMiddle').hide();
				$('#statusMsg').show();
			},	// pre-submit callback 
			success: function() { 
				$('#statusMsg').hide();
				$('#mainColMiddle').fadeIn('slow');
				postFormCallback();
			},	//post-submit callback
		    async: false,
			cache: false,
			//url:       'update-page.action', // override for form's 'action' attribute 
			type:      'post',        		// 'get' or 'post', override for form's 'method' attribute 
			dataType:  null,        		// 'html', 'xml', 'script', or 'json' (expected server response type) 
			clearForm: false,        		// clear all form fields after successful submit 
			resetForm: false        		// reset the form after successful submit 
			// $.ajax options can be used here too, for example: 
			//timeout:   3000 
		 };
	
}
regenFormOptions();

var savePageForm = function(xhrCallback) {
    var savePageStatus = true;

    if(dirtyDataFlag) {
        var noTrampleSuccess = formSubmitOptions.success;
        regenFormOptions();
        formSubmitOptions.success = noTrampleSuccess;
        if (validatePage()) {
            savePageStatus = savePage();
            if (savePageStatus === false) {
                $('#pageForm').ajaxForm(formSubmitOptions);
                $('#pageForm').submit();
            }
            dirtyDataFlag = false;
        } else {
            savePageStatus = false;
        }
    }

    if (xhrCallback != undefined) xhrCallback();
    
    return savePageStatus;
}
appSave = savePageForm;

// this should unbind the ajaxForm so that the redirect works
var savePageFormAndContinue = function() {
	if (validatePage()) {
	    if($('#pageForm').size() > 0) {
            // need to fix this eventually so that Save & Continue does not force a Save
            // if everything is current.
	    	savePage();
	        var pageForm = $('#pageForm');
	        pageForm.ajaxFormUnbind();
	        var action = pageForm.attr("action");
	        pageForm.attr("action", action+"AndContinue");
	        pageForm.submit();
	    } else if($('#nextPageForm').size() > 0) {
	    	if(dirtyDataFlag) {
                savePage();
                dirtyDataFlag = false;
            }
            window.location.href = $('#nextPageForm').attr('href');
	    }
	}
}

var goNextPageForm = function(url, formTitle) {

    var oldSuccess = formSubmitOptions.success;
    formSubmitOptions.success = function() {  postFormCallback(); }

    savePageForm(function() {

        formSubmitOptions.success = oldSuccess;
        // alert("loading next form");
        loadForm(url, formTitle, function() {
            $('#statusMsg').hide();
            $('#mainColMiddle').fadeIn('slow');
        });
    });

    return false;
}


function loadForm(url, title, callback) {

	if (typeof(cleanupPage) == 'function') {
		cleanupPage();
	}
	var bindAppInputs = function(responseText, statusCode, xhrInstance) {
        bindDirtyDataHandlers('#mainColMiddle ');
    	if (callback) {
    		callback();
    	}
    };
	$('#mainColMiddle').load(url, {fileName: title}, bindAppInputs);
	if (title) {
		$('#currentPageTitle').html(' to ' + title);
	}
	return false;
}

// for use outside of common.js
/* no more fancybox */
var loginOverlay = {
	'hideOnContentClick': true,
	'zoomSpeedIn': 300, 
	'zoomSpeedOut': 300, 
	'overlayShow': true,
	'overlayOpacity': .7,
	'zoomOpacity': true,
	'hideOnContentClick': false,
	'frameWidth': 340,
	'frameHeight': 300
};

// copied from the PRO version's designer.js - do not include both simultaneously.
function loadPreviewNoNavCallback(responseText, statusCode, xhr) {
    $('#preview-dialog a').each(
        function(n) {
            var url = this.href;
            this.href = '#';
            $(this).bind('click',
                function(event) {
                    return false;
                }
            );
        }
    );
    $('.preview-controls').hide();
    $('.preview-title .preview-control-back').hide();
    renderPlatform();
}

// copied from the PRO version's designer.js - do not include both simultaneously.
function deletePreviewNavStack(event, ui) {
    $.get('preview-form!deleteNavStack',
        {
            applicationUUID: $('#preview-property-application-UUID').text(),
            navStackInstance: $('#preview-property-application-navStackInstance').text()
        },
        function(data) {
        }
    );
}

function effectsCallback(){
	setTimeout(function(){
		$("#effects:visible").removeAttr('style').hide().fadeOut();
	}, 1000);
};


function loadPreviewCallback(responseText, statusCode, xhr) {
    $('#preview-dialog a').each(
        function(n) {
            var url = this.href;
            this.href = '#';
            var name = this.name;
            $(this).bind('click',
                function(event) {
            		if (name != '') {
            			$('#effectsContent').html(name);
            			$('#effects').show('blind',{},500,effectsCallback)
            		}
            		else {
            			$('#preview-dialog').load(url, '', loadPreviewCallback);
            		}
                    return false;
                }
            );
        }
    );
    // $('#preview-dialog').bind('dialogclose', deletePreviewNavStack);
    $('.preview-controls').show();
    renderPlatform();
}

function highlightTab(id) {
	$('#navigation li a').each( function(){$(this).removeClass('active');} );
	$('#'+id).addClass('active');
}

function onReadyLoad() {
	// png fix
	$(document).pngFix(); 
	
	$('#statusMsg').hide();

	bindHelpBox();
	
	// bind forms using 'ajaxForm'
	//$('#pageForm').ajaxForm(formSubmitOptions); 
	// $('#deleteImage').ajaxForm(formSubmitOptions); 
	
    /*
    if($('#scrollPane').size() > 0) {
        alert("Creating scroll pane");
	    $('#scrollPane').jScrollPane();
    }
    */
	bindFancyBoxes();

	bindDirtyDataHandlers();

    bindPreviewLauncher();

    bindLoginModal();

    bindRegisterModal();

    // AppType selectors
    $('li.apptype a').bind('mouseover', function(event) {
        previewType($(this).attr('id'));
    });
}

function bindFancyBoxes() {
	/* no more fancybox */
	// login modal overlay
	//$("a.loginModal").fancybox(loginOverlay); 
		
	// register modal overlay
    /*
	$("a.registerModal").fancybox({
		'hideOnContentClick': true,
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': true,
		'overlayOpacity': .7,
		'zoomOpacity': true,
		'hideOnContentClick': false,
		'frameWidth': 450,
		'frameHeight': 400
	});
    */
	
	// image library modal overlay
	$("a.imageUpload").fancybox({
		'hideOnContentClick': true,
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': true,
		'overlayOpacity': .7,
		'zoomOpacity': true,
		'hideOnContentClick': false,
		'frameWidth': 350,
		'frameHeight': 300
	});
	
	// image edit modal overlay
	$("a.imageEditModal").fancybox({
		'hideOnContentClick': true,
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': true,
		'overlayOpacity': .7,
		'zoomOpacity': true,
		'hideOnContentClick': false,
		'frameWidth': 650,
		'frameHeight': 380
	});
	
	// email preview modal overlay
	$("a.emailPreview").fancybox({
		'hideOnContentClick': true,
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': true,
		'overlayOpacity': .7,
		'zoomOpacity': true,
		'hideOnContentClick': false,
		'frameWidth': 500
	});
	
	// upload modal overlay
	$("a.imageUploadModal").fancybox({
		'hideOnContentClick': true,
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300, 
		'overlayShow': true,
		'overlayOpacity': .7,
		'zoomOpacity': true,
		'hideOnContentClick': false,
		'frameWidth': 300
	});
	
	// close fancybox with link
	$('.close_fancybox').live('click', $.fn.fancybox.close); 
}

function bindHelpBox() {
	// help show hide bubble
	$("#help1").hide(); // change this to "hide" to hide the layer by default
	$('#helpLink').click(function(){
			$("#help1").show();
		});
	$('#close1').click(function(){
		$("#help1").hide();
		return false;
	});
}

var setDirtyFlag = function(event) {
	dirtyDataFlag = true;
}
var navDirtyFlag = function(event) {
    var targetNav = $(this).attr('href');

    if(dirtyDataFlag) {
        $(this).attr('href', '#');
        // run specific save method here before continuing.
        if(appSave) {
            appSave(function() {
                dirtyDataFlag = false;
                if(targetNav != "#") {
                    window.load(targetNav); 
                }
            });
        }
        return false;
    }
    return(true);
}

var bindDirtyDataHandlers = function(narrow) {
	if (narrow == undefined) {
		narrow = "";
		//log("binding all appInputs");
	} else {
		//log("narrow binding to " + narrow + " appInputs");
	}
    // NOTE: .live() works for Firefox for inputs/textareas/etc., but fails
    // on Internet Explorer.  There is a separate post-load binding for 
    // the pageBuilder controls in pageBuilder.jsp that will result in Firefox
    // executing two event handlers per change/click event.
    
    // unbind the events first to prevent multiple invocations
    $(narrow+'.appInputs').die('change', setDirtyFlag);
    $(narrow+'.appInputs').die('keyup', setDirtyFlag);
	$(narrow+'.appControls, '+narrow+'li.appControls').die('click', setDirtyFlag);
	$(narrow+'a.appNavigation').unbind('click', navDirtyFlag);
	
    $(narrow+'.appInputs').live('change', setDirtyFlag);
    $(narrow+'.appInputs').live('keyup', setDirtyFlag);
    $(narrow+'.appControls, '+narrow+'li.appControls').live('click', setDirtyFlag);
    $(narrow+'a.appNavigation').bind('click', navDirtyFlag);
}

var bindPageBuilderElements = function(loadFormFunction) {
	if (loadFormFunction == undefined) {
		loadFormFunction = function() { 
			loadForm($('#pageBuilderSaveUrl').text(), $('#pageBuilderSaveTitle').text());
		}
	}
    $('#pageBuilderConfirmationDialog').dialog({
        autoOpen: false,
        buttons: {
            "Save": function() { appSave(loadFormFunction); setSaveComplete(); $(this).dialog("close"); },
            "Discard": function() { setSaveComplete(); loadFormFunction(); $(this).dialog("close"); },
            "Cancel": function() { $(this).dialog("close"); }
        },
        modal: true,
        resizable: false,
        title: "Save changes?"
    });

    $('.pageBuilderNav').bind('click', function(event) {
    	//alert($(this).attr('title'));
        $('#pageBuilderSaveUrl').html($(this).attr('href'));
        $('#pageBuilderSaveTitle').html($(this).attr('title'));
        if(dirtyDataFlag) {
            $('#pageBuilderConfirmationDialog').dialog('open');
        } else {
            loadForm($(this).attr('href'), $(this).attr('title'));
        }
        return(false);
    });
}

var bindRegisterModal = function() {
    // Register dialog
    if($('#registerModal').size() > 0) {
        $('#registerModal').dialog({
            autoOpen: false,
            buttons: {
                "Cancel": function() { $('#registerModal').dialog('close'); },
                "Register": function() {
        			x = $('#registerFormSubmit').attr('disabled');
        			if (x != 'true') {
                    	$('#registerForm').submit(); 
                    	$('#registerModal').dialog('close'); }
        			}
            },
            open: function(event, ui){
            	$("#registerModal :input[name='username']").each(function(){this.focus();});
            },
            modal: true,
            resizable: false,
            title: "Register",
            height: 350,
            width: 460
        });

        $('.register_open').bind('click', function(event) { $('#registerModal').dialog('open'); return false; });
        $('.register_close').bind('click', function(event) { $('#registerModal').dialog('close'); return false; });
    }
}

var bindLoginModal = function() {
    // Login dialog
    if($('#loginModal').size() > 0) {
        $('#loginModal').dialog({
            autoOpen: false,
            buttons: {
                "Cancel": function() { $('#loginModal').dialog('close'); },
                "Login":  function() { $('#loginForm').submit(); $('#loginModal').dialog('close'); }
            },
            open: function(event, ui){
            	$("#loginModal :input[name='username']").each(function(){this.focus();});
            },
            modal: true,
            resizable: false,
            title: "Login",
            height: 250,
            width: 350
        });

        $('.login_open').bind('click', function(event) { $('#loginModal').dialog('open'); });
        $('.login_close').bind('click', function(event) { $('#loginModal').dialog('close'); });
    }
}

var previewLauncherIntervalId = null;
var bottomHalfPreviewLauncher = function(saveStatus, target, callback) {
    if(saveStatus.dataSaved) {
        if(previewLauncherIntervalId !== null) {
            clearInterval(previewLauncherIntervalId);
            previewLauncherIntervalId = null;
        }
        $('#preview-dialog').load(target, callback);
    }
}

var bindPreviewLauncher = function() {
    if($('#preview-dialog').size() > 0 && $('#preview-launcher').size() > 0) {
//        if(previewTarget == "") {
            previewTarget = $('#preview-launcher').attr('href');

            $('#preview-launcher').unbind('click');
            $('#preview-launcher').bind('click', function(event) {

                var saveStatus = null;

                if(appSave) { 
                    saveStatus = appSave(function() { dirtyDataFlag = false; });
                }

                $('#preview-dialog').css('background-image', 'none');

                var finalTarget = previewTarget;

                // $('#formPath') contains the nav element to get to
                // the current form for PageBuidler.
                if($('#formPath').size() > 0) {
                    finalTarget += "&navigationOperation=" + encodeURIComponent($('#formPath').text());
                }

                if(saveStatus === null || (saveStatus !== null && (saveStatus === true || saveStatus === false))) {
                    saveStatus = { dataSaved: true };
                }

                var previewCallback;
                if($('#preview-launcher').hasClass('noNavPreview')) {
                    previewCallback = loadPreviewNoNavCallback;
                } else {
                    previewCallback = loadPreviewCallback;
                }

                if(saveStatus.dataSaved) {
                    bottomHalfPreviewLauncher(saveStatus, finalTarget, previewCallback);
                } else {
                    // check every 250ms for save completion.
                    previewLauncherIntervalId = setInterval(bottomHalfPreviewLauncher, 250, saveStatus, finalTarget, previewCallback);
                }
                return false;
            });
            //$('#preview-launcher').attr('href', '#');
            if($('#preview-launcher').hasClass('launchNow')) {
                $('#preview-dialog').load(previewTarget, '', loadPreviewCallback);
            }
//        }
    }
}

var scrollPaneProps = {
	showArrows:true,
	dragMaxHeight: 100,
	scrollbarWidth:17,
	scrollbarMargin: 0
};
$.extend($.fn.jScrollPane.defaults, scrollPaneProps);

// image preloader
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
};

function toggleSteps(step) {
	for (i=1; i<7; i++) {
		$('#step'+i).removeClass('active');
	}
	$('#step'+step).addClass('active');
}
		
// preview swap for Step 1
function previewType(APPTYPE){
    if($('#previewImageUrl').size() > 0) {
        $('#application-preview-image').attr("src", $('#previewImageUrl').attr('href') + APPTYPE + ".png");
    }
}

// swap class app type for Step 1
function selectType(APP){
	$("li.apptype a").attr("class", "default");
	$("a#" + (APP)).attr("class", "active");
	$("#appType").val(APP);

    $('li.apptype a').bind('mouseout', function(event) {
        previewType(APP);
    });
}

//swap class pages for Step 2
var maxPages = 9;
function selectPages(PAGE){
	elem = $("#" + PAGE);
	if (elem.hasClass ("active")) {
        elem.removeClass("active");
        elem.addClass("default");

		$("#pages").removeClass(PAGE);
		log("remove " + PAGE + " from 'pages'");
	}
	else if (elem.hasClass ("default")) {
        pagesSelected = $("div.selectLinks a.active").length;
        
        if(pagesSelected >= maxPages) {
			alert("You can select no more than " + maxPages + " pages.");
			return;
		}
        elem.removeClass("default");
        elem.addClass("active");

		$("#pages").addClass(PAGE);
		log("add " + PAGE + " to 'pages'");
	}
}

// swap class for picture library
function selectPictures(PICTURE){
	elem = $("#carouselImages li#" + PICTURE);
	if (elem.hasClass ("active")) {
		$("#carouselImages li#" + PICTURE).removeClass("active");
		$("#carouselImages li#" + PICTURE).addClass("default");
		log("remove " + PICTURE + " from 'pictures'");
	}
	else if (elem.hasClass ("default")) {
		$("#carouselImages li#" + PICTURE).removeClass("default");
		$("#carouselImages li#" + PICTURE).addClass("active");
		log("add " + PICTURE + " to 'pictures'");
	}
}

// swap class for selected carousel item
function selectCarouselColor(COLOR){
	$("#carouselColors li").removeClass("active");
    // ensure we only get one copy of the classname on each element.
    $("#carouselColors li").removeClass("default");
	$("#carouselColors li").addClass("default");

	$("#carouselColors li#" + COLOR).removeClass("default");
	$("#carouselColors li#" + COLOR).addClass("active");

	$("#selectedColor").val(COLOR);
}

// hover class to the carousel li
$('#carouselColors li').hover(function() {
	$(this).addClass('carouselColorsHover');
  }, function() {
  $(this).removeClass('carouselColorsHover');
});

$('#carouselColors li.active').hover(function() {
	$(this).addClass('carouselColorsHoverActive');
  }, function() {
  $(this).removeClass('carouselColorsHoverActive');
});

function selectCarouselLibrary(ID, IMAGE){
	$("#carouselImages li").removeClass("active");
    // ensure we only get one copy of the classname on each element.
	$("#carouselImages li").removeClass("default");
	$("#carouselImages li").addClass("default");

	$("#carouselImages li#" + ID).removeClass("default");
	$("#carouselImages li#" + ID).addClass("active");

	$("#selectedImage").val(IMAGE);
}

// preview swap image in phone
function previewContent(IMGNAME){
	$("#preview").attr("src", IMGNAME);
}

// show BG image
function showBgImage(IMGNAME){
	$("#builderImage").attr("src", IMGNAME);
	document.getElementById("deleteImage").style.display='block';
	document.getElementById("actionFeedback1").style.display='block';
	document.getElementById("actionFeedback2").style.display='none';
}

// hide BG image
function hideBgImage(IMGNAME){
	$("#builderImage").attr("src", IMGNAME);
	document.getElementById("deleteImage").style.display='none';
	document.getElementById("actionFeedback2").style.display='block';
	document.getElementById("actionFeedback1").style.display='none';
}

// swap picture and text in builder
function pictureImage(ID, IMGPATH, IMGNAME){
	$("#" + ID).attr("src", IMGPATH);
	$("#" + ID + "name").text(IMGNAME);
	document.getElementById(ID + "name").style.display='block';
	document.getElementById(ID + "delete").style.display='block';
}

// swap map and text in builder
function mapImage(ID,IMGNAME){
	$("#" + ID).attr("src", IMGNAME);
	document.getElementById(ID + "delete").style.display='block';
}

// swap help content for Step 6
function showLayer(LAYER){
	document.getElementById(LAYER).style.display='inline';
}

function hideLayer(LAYER){
	document.getElementById(LAYER).style.display='none';
}

function helpShowMap(){
	document.getElementById("defaultText").style.display='none';
	document.getElementById("mapText").style.display='inline';
}

function log(msg) {
	if (window.console) {
		console.log(msg);
	}
}



function securitycodeYes(){
	document.getElementById("securitycode").style.display='block';
	document.getElementById("securitycodeNo").style.display='none';
	// var code = randomString(10);
	// $('#securityCodeHidden').val(code);
	// $('#securityCodeText').text(code);
}

function securitycodeNo(){
	document.getElementById("securitycode").style.display='none';
	document.getElementById("securitycodeNo").style.display='block';
//	$('#securityCodeHidden').val('');
//	$('#securityCodeText').text('');
}

function randomString(string_length) {
	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
	var charsLength = chars.length;
	var randomstring = '';
	for (var i=0; i<string_length; i++) {
		var rnum = Math.floor(Math.random() * charsLength);
		randomstring += chars.substring(rnum,rnum+1);
	}
	return randomstring;
}