// Default Female Avatar Attributes
var femaleAvatar = {
    gender : 0,
    hair: 0,
    skin: 0,
    top: 0,
    bottom: 0
};

// Default Male Avatar Attributes
var maleAvatar = {
    gender : 1,
    hair: 0,
    skin: 0,
    top: 0,
    bottom: 0
};

// number of images the randmizer will preload
var NUM_IMAGES_TO_PRELOAD = 8;
// miliseconds between random image transition
var IMAGE_CYCLE_TIME = 180;

var randomized_male_attributes = false;
var randomized_female_attributes = false;


// this keeps track of the current avatar indices(it's current values for gender, skin, hair, top, bottom)
var avatarAttributes = femaleAvatar;

var activeAvatar = "FemaleAvatar"; // or AvatarB

function toggleActiveAvatarId() {
  return activeAvatar == "FemaleAvatar" ? activeAvatar = "MaleAvatar" : activeAvatar = "FemaleAvatar";
}

function getActiveAvatarId() {
  return activeAvatar;
}

function getInactiveAvatarId() {
  return activeAvatar == "FemaleAvatar" ? "MaleAvatar" : "FemaleAvatar";
}

var parametersMap = {
  hair: 0,
  skin: 1,
  top: 2,
  bottom: 3
};

var parametersArray = ['hair', 'skin', 'top', 'bottom'];

var persistentMessages = {};

function showInputMessage(inputName, message, isPersistent) {
    if ($(inputName+'Message') != null) {

        if (message != null) {
            $(inputName+'Message').update(message);
        }

        // set message persistence (for error messages)
        if (isPersistent != null) {
            persistentMessages[inputName] = isPersistent;
        }

        // don't animate already visible messages
        //var alreadyPersisted = persistentMessages[inputName] != null ? persistentMessages[inputName] : false;
        if (!Element.visible($(inputName+'MessageContainer'))) {
            Effect.Appear($(inputName+'MessageContainer'));
            Effect.SlideDown($(inputName+'MessageContainer'));
        }
    }
}

function hideInputMessage(inputName) {
    if ($(inputName+'Message') != null) {
        // only hide non-persistent messages
        var isPersistent = persistentMessages[inputName] != null ? persistentMessages[inputName] : false;
        if (Element.visible($(inputName+'MessageContainer')) && !isPersistent) {
            Effect.Fade($(inputName+'MessageContainer'));
            Effect.SlideUp($(inputName+'MessageContainer'));
        }
    }
}

function getAttributeName(attr) {
    return avatarData.permutations[avatarAttributes['gender']].Parameters[parametersMap[attr]].Values[avatarAttributes[attr]].Value;
}

function getOutfitSKUs() {
  return avatarData.permutations[avatarAttributes['gender']].Parameters[0].Values[avatarAttributes['hair']].skus + ","
         + avatarData.permutations[avatarAttributes['gender']].Parameters[1].Values[avatarAttributes['skin']].skus + ","
         + avatarData.permutations[avatarAttributes['gender']].Parameters[2].Values[avatarAttributes['top']].skus +","
         + avatarData.permutations[avatarAttributes['gender']].Parameters[3].Values[avatarAttributes['bottom']].skus;
}

var randomImagesArrayMale;
var randomImagesArrayFemale;


function init() {
    setOutfit(initialGender, initialOutfit);
    reloadRandomImages();
}

//function setAvatarGender(gender){
//    setTimeout('setAvatarGenderReally("' + gender + '")', 1000);
//}

var waitingForEffect = false;

function setAvatarGender(gender) {

    if (waitingForEffect) {
        return;
    }

    if ((avatarAttributes['gender'] == 0) && (gender == 'm')) {
        femaleAvatar = avatarAttributes;
        avatarAttributes = maleAvatar;
        if ( (gender == 'm') && (!randomized_male_attributes)){
            loadPreloadedImages(randomImagesArrayMale, IMAGE_CYCLE_TIME);
            reloadRandomImages('m');
            randomized_male_attributes = true;
            return;
        }
    } else if ((avatarAttributes['gender']) == 1 && (gender == 'f')) {
        maleAvatar = avatarAttributes;
        avatarAttributes = femaleAvatar;
        if ( (gender == 'f') && (!randomized_female_attributes) ){
            loadPreloadedImages(randomImagesArrayFemale, IMAGE_CYCLE_TIME);
            reloadRandomImages('f');
            randomized_female_attributes = true;
            return;
        }
    } else {
        // only randomize the avatars one time for each gender
        if ( (gender == 'm') && (!randomized_male_attributes) ){
            loadPreloadedImages(randomImagesArrayMale, IMAGE_CYCLE_TIME);
            randomized_male_attributes = true;
        } else if ( (gender == 'f') && (!randomized_female_attributes) ){
            loadPreloadedImages(randomImagesArrayFemale, IMAGE_CYCLE_TIME);
            randomized_female_attributes = true;
        }
        return;
    }

    $(getInactiveAvatarId()+"Image").setAttribute("src", getAvatarImgSrc());
    Effect.Fade($(getActiveAvatarId()));
    Effect.Appear($(getInactiveAvatarId()));
    waitingForEffect = true;
    setTimeout('finishFade()', 1000);

}

function finishFade(){
    updateOutfitNames();
    toggleActiveAvatarId();
    waitingForEffect = false;
}

function nextAvatarAttribute(attr) {
    var attrIdx = 0
    if (avatarAttributes[attr]+1 < avatarData.permutations[avatarAttributes['gender']].Parameters[parametersMap[attr]].Values.size()) {
        // within range
        attrIdx = avatarAttributes[attr]+1
    }
    avatarAttributes[attr] = attrIdx;

    renderAvatar();

    // TODO: Remove "Virtual Page" style when Events is supported in GA account
    pageTracker._trackPageview('/app/start/AvatarChanged/'+ attr);
    pageTracker._trackEvent('FWE','AvatarChanged',attr);
}

function previousAvatarAttribute(attr) {
    var attrIdx = avatarAttributes[attr];
    if (attrIdx-1 < 0) {
        avatarAttributes[attr] = avatarData.permutations[avatarAttributes['gender']].Parameters[parametersMap[attr]].Values.size() - 1;
    } else {
        avatarAttributes[attr] = attrIdx-1;
    }

    renderAvatar();

    // TODO: Remove "Virtual Page" style when Events is supported in GA account
    pageTracker._trackPageview('/app/start/AvatarChanged/'+ attr);
    pageTracker._trackEvent('FWE','AvatarChanged',attr);
}

function renderAvatar() {
    // Avatar Image
    $(getActiveAvatarId()+"Image").setAttribute("src", getAvatarImgSrc());

    // Outfit Labels
    updateOutfitNames();

    // Outfit Form Element
    $('outfit').setValue(getOutfitSKUs());
}

function updateOutfitNames() {
    $('hairName').update(getAttributeName('hair'));
    $('skinName').update(getAttributeName('skin'));
    $('topName').update(getAttributeName('top'));
    $('bottomName').update(getAttributeName('bottom'));
}

function getAvatarImgSrc() {
    var gender = avatarAttributes['gender'];
    return "/images/start/paperdolls/"
           + avatarData.permutations[gender].Gender + "_"
           + getAttributeName('hair') +"_"
           + getAttributeName('skin') +"_"
           + getAttributeName('top') +"_"
           + getAttributeName('bottom') +".png";
}

// Video Tour Panel
function showTour(id) {
  Effect.Appear($(id+'Info'));
  Effect.Appear($('TourPanel'));
}

// Background Change Functions
var currentLocationIdx = 0;
var locations = [
  {id:"Location01", venue:"The Lounge", city:"New Venezia"},
  {id:"Location02", venue:"Rooftop Disco", city:"New Venezia"},
  {id:"Location03", venue:"Eviltwin Store", city:"Raijuku"},
  {id:"Location04", venue:"NV255 Apartment", city:"New Venezia"},
  {id:"Location05", venue:"Railway Station", city:"La Genoa Aires"},
  {id:"Gateway", venue:"Gateway Plaza", city:""} // gateway needs to be last
];

function setLocation(idx) {
    // Ensure idx is within range 0..locations.length
    idx = (idx > -1 && idx < locations.length) ? idx : 0;
    if (currentLocationIdx == idx) return;

    Effect.Fade($(locations[currentLocationIdx]['id']));
    currentLocationIdx = idx;
    $('VenueName').update(locations[currentLocationIdx]['venue']);
    $('CityName').update(locations[currentLocationIdx]['city']);
    Effect.Appear($(locations[currentLocationIdx]['id']));
    pageTracker._trackEvent('FWE','ChangeLocation',locations[currentLocationIdx]['venue']);
    pageTracker._trackPageview('/app/start/changeLocation/'+ locations[currentLocationIdx]['venue']);
}

function changeLocation() {
    // increment the location but not the last image which is reserved for gateway
    var idx = currentLocationIdx+1;
    idx = (idx > -1 && idx < locations.length-1) ? idx : 0;
    setLocation(idx);
}

function iframeDownload(url) {
  try { // catch any erroneous errors
    var iframe = document.createElement("IFRAME");
    //iframe.setStyle(iframe, "border", "0px solid #000000");
    //iframe.setStyle(iframe, "position", "absolute");
    //iframe.setStyle(iframe, "left", "0px");
    //iframe.setStyle(iframe, "bottom", "0px");
    iframe.id = "download-iframe";
    iframe.width = 1;
    iframe.height = 1;
    iframe.src = url;
    document.body.appendChild(iframe);
  }
  catch (err) {
    alert(err.message);
  }
}

function showTip(inputId) {
    
}

/*
function loadJSON()
{
    //var xhr=createXHR();
    var xhr = new XMLHttpRequest();
    var fname = "../js/permutations.json";
    xhr.open("GET", fname,true);
	xhr.onreadystatechange=function()
	{
		if (xhr.readyState == 4)
		{
			if (xhr.status != 404)
			{
				//document.getElementById("zone").innerHTML = "found";
				avatarData = eval("(" + xhr.responseText + ")");
                //TODO figure out which index Hair corresponds to and set a global variable for that index
                //TODO do the same for other 3 Parameters (skin, top, bottom)
                renderAvatar();
            }
			else
			{
				alert("permutations.json not found");
			}
		}
	}
	xhr.send(null);
}
*/

/**
* Do all of the UI transitions etc for completing the registration process
*/
function completeRegistration()
{
    // Hide LocationControl
    Effect.SlideUp($('loginBar'));

    // Hide LocationControl
    Effect.Fade($('LocationControl'));

    // Transition the LocationImage to Gateway
    setLocation(locations.length-1);
}

function testSetOutfit(){
    testSkus = ['142','801','32403', '31018'];
    testGender = 1;

    setOutfit(testGender, testSkus);

    renderAvatar();
}

function randomizeOutfit(){
    var genderIndex = avatarAttributes['gender'];

    for (var i = 0; i < parametersArray.size(); i++){
        avatarAttributes[parametersArray[i]] = Math.floor((avatarData.permutations[genderIndex].Parameters[i].Values.size())*Math.random());
    }

    renderAvatar();
}

// returns an array with preloaded numImages images
function preloadRandomImages(numImages, gender){

    var imageArray = new Array();

    var imageObj = new Image();

    for (var i = 0; i < numImages; i++){
        imageArray[i] = getRandomImageName(gender);
        imageObj.src=imageArray[i];
    }

    return imageArray;
}

function getRandomImageName(gender){

    var genderIndex = 0;

    if (gender == 'm'){
        genderIndex = 1;
    } else if (gender == 'f'){
        genderIndex = 0;
    } else {
        alert("should not call this function without gender argument");
    }

    var savedAttributes =  {
        gender : avatarAttributes['gender'],
        hair: avatarAttributes['hair'],
        skin: avatarAttributes['skin'],
        top: avatarAttributes['top'],
        bottom: avatarAttributes['bottom']
    }

    avatarAttributes['gender'] = genderIndex;

    for (var i = 0; i < parametersArray.size(); i++){
        avatarAttributes[parametersArray[i]] = Math.floor((avatarData.permutations[genderIndex].Parameters[i].Values.size())*Math.random());
    }

    var imageName = getAvatarImgSrc();

    avatarAttributes =  {
        gender : savedAttributes['gender'],
        hair: savedAttributes['hair'],
        skin: savedAttributes['skin'],
        top: savedAttributes['top'],
        bottom: savedAttributes['bottom']
    }

    return imageName;

}

function loadAvatarAttributesFromImageName(imageName){
    var attributes = imageName.split("_");

    var gender = attributes[0].split("/")[4];
    var hair   = attributes[1];
    var skin   = attributes[2];
    var top    = attributes[3];
    var bottom = attributes[4].split(".")[0];

    for (var i = 0; i < avatarData.permutations.size(); i++){
        if (gender == avatarData.permutations[i].Gender){
            avatarAttributes['gender'] = i;
        }

        for (var j = 0; j < avatarData.permutations[i].Parameters.size(); j++){
            for (var k = 0; k < avatarData.permutations[i].Parameters[j].Values.size(); k++){
                if ( (hair == avatarData.permutations[i].Parameters[j].Values[k].Value) &&
                     ("Hair" == avatarData.permutations[i].Parameters[j].Parameter) ){
                    avatarAttributes['hair'] = k;
                }
                if ( (skin == avatarData.permutations[i].Parameters[j].Values[k].Value) &&
                     ("Skin" == avatarData.permutations[i].Parameters[j].Parameter) ){
                    avatarAttributes['skin'] = k;
                }
                if ( (top == avatarData.permutations[i].Parameters[j].Values[k].Value) &&
                     ("Top" == avatarData.permutations[i].Parameters[j].Parameter) ){
                    avatarAttributes['top'] = k;
                }
                if ( (bottom == avatarData.permutations[i].Parameters[j].Values[k].Value) &&
                     ("Bottom" == avatarData.permutations[i].Parameters[j].Parameter) ){
                    avatarAttributes['bottom'] = k;
                }
            }
        }
    }

    renderAvatar();
}

// this function called with 12, 120 looks cool (with local assets)
// 10 500 is better on staging website
function randomizeOutfitMultiple(iterations, time){
    for (var i = 0; i < iterations; i++){
        setTimeout('randomizeOutfit()', time * i);
    }
}


function loadPreloadedImages(randomImageArray, time){

    if (randomImageArray.size() == 0){
        return;
    }

    waitingForEffect = true;

    for (var i = 0; i < randomImageArray.size(); i++){
        setTimeout('loadAvatarAttributesFromImageName("' + randomImageArray[i] + '")', time * i);
    }

    setTimeout('waitingForEffect = false', time * randomImageArray.size());   

    // TODO shift around the random image array so it seems more random next time we randomize, maybe load a few more images in it
    var firstImage = randomImageArray[0];
    for (var i = 0; i < randomImageArray.size()-1; i++){

        randomImageArray[i] = randomImageArray[i+1];
    }

    randomImageArray[randomImageArray.size()-1] = firstImage;

}


function testPreloading(time){
    var imageArray = preloadRandomImages(15);

    loadPreloadedImages(imageArray, time);
}

function setOutfit(gender, skus){
  //skus is array of skus
    var genderIndex = 0;

    if ( (gender == 'm') || (gender == "m") ){
        genderIndex = 1;
    } else if ( (gender == 'f') || (gender == "f") ){
        genderIndex = 0;
    }

    if (skus == null){
        // set to default values for female
        //skus = ["5152", "5800", "5522", "5876", "5901", "21519", "5702"];
        skus = [];
    }

    var genderChanged = false;
    if ((avatarAttributes['gender'] == 0) && (genderIndex == 1)) {
        femaleAvatar = avatarAttributes;
        avatarAttributes = maleAvatar;
        genderChanged = true;
    } else if ((avatarAttributes['gender']) == 1 && (genderIndex == 0)) {
        maleAvatar = avatarAttributes;
        avatarAttributes = femaleAvatar;
        genderChanged = true;
    }

    for (var i =0; i < skus.size(); i++){
        for (var j = 0; j < avatarData.permutations[genderIndex].Parameters.size(); j++){
            for (var k = 0; k < avatarData.permutations[genderIndex].Parameters[j].Values.size(); k++){
                for (var l = 0; l < avatarData.permutations[genderIndex].Parameters[j].Values[k].skus.size(); l++){
                    if (skus[i] == avatarData.permutations[genderIndex].Parameters[j].Values[k].skus[l]){
                        avatarAttributes[parametersArray[j]] = k;
                    }
                }
            }
        }
    }

    $(getInactiveAvatarId()+"Image").setAttribute("src", getAvatarImgSrc());
    Effect.Fade($(getActiveAvatarId()));
    Effect.Appear($(getInactiveAvatarId()));
    updateOutfitNames();
    toggleActiveAvatarId();
    $('outfit').setValue(getOutfitSKUs());

}


function reloadRandomImages(gender){
    if (gender == 'm'){
        randomImagesArrayMale   =  preloadRandomImages(NUM_IMAGES_TO_PRELOAD, 'm');
    } else if (gender == 'f'){
        randomImagesArrayFemale =  preloadRandomImages(NUM_IMAGES_TO_PRELOAD, 'f');
    } else {
        randomImagesArrayMale   =  preloadRandomImages(NUM_IMAGES_TO_PRELOAD, 'm');
        randomImagesArrayFemale =  preloadRandomImages(NUM_IMAGES_TO_PRELOAD, 'f');
    }
}

function initAvatarStep(){
    // randomize the female images
    loadPreloadedImages(randomImagesArrayFemale, IMAGE_CYCLE_TIME);
    
}

function randomizeAvatar(){

    if(waitingForEffect){
        return;
    }
    //what gender are we?
    if (avatarAttributes['gender'] == 0){
        loadPreloadedImages(randomImagesArrayFemale, IMAGE_CYCLE_TIME);
        reloadRandomImages('f');
    } else if (avatarAttributes['gender'] == 1){
        loadPreloadedImages(randomImagesArrayMale, IMAGE_CYCLE_TIME);
        reloadRandomImages('m');        
    } else {
        alert("not sure how to randomize");
    }

}