var themeMode = "not_logged_in";
var changeThemeFuncName = "changeThemeId";

function customizeAppearance() {
  if (themeDivVisible()) {
    hideThemeDiv();
  } else {    
    loadThemeYUI();
  }
}

function loadThemeYUI() {
  var base = yuiBuildPathV2;
  if ((!base) || (base == "")) base = '/yui/2_7/build/';
  var tloader = new YAHOO.util.YUILoader( {
    require:['connection', 'json', 'cookie'],
    base: base,
    allowRollup:true,
    onSuccess:function () { loadThemeData() }
   });
  tloader.insert();
}

var callbackThemes = { success:themeDataLoaded, failure:themeDataFailed };

function themeDataLoaded(o) {
  try {
    var themes = YAHOO.lang.JSON.parse(o.responseText);
    themeMode = themes.mode;
    jsonParser = "yahoo";
    changeThemeFuncName = "changeThemeId";
    var html = getThemeHTML(themes);
    getThemeDiv().innerHTML = html;
    showThemeDiv();    
  } catch (e) {
    alert(e);
  }
}

function themeDataFailed() {
  alert("failed");
}

function loadThemeData() {
  var sUrl = '/ftweb/bin/ft.dll/getThemeOptions';
  var tp = themePage;
  if (!themePage) themePage = "default";
  sUrl += '?themePage=' + themePage;
  var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callbackThemes); 
}

function getThemeDiv() {
  return document.getElementById("themes_div");
}

function themeDivVisible() {
  return getThemeDiv().style.display == "block";
}

function displayThemeMask() {
  var thmMask = document.getElementById("themes_div_mask");
  if (!thmMask) {
    thmMask = document.createElement("div");
    //thmMask.className = "mask";
    thmMask.id = "themes_div_mask";
    thmMask.style.display = "block";
    document.body.insertBefore(thmMask, document.body.firstChild);
    this.mask = thmMask;
  } else {
    thmMask.style.display = "block";
  }
}

function removeThemeMask() {
  var thmMask = document.getElementById("themes_div_mask");
  if (thmMask) {
    var parent = thmMask.parentNode;  
    thmMask.style.display = "none";
    if (parent) parent.removeChild(thmMask);
  }
}

function getThemeHTML(themes) {
  var retval = "";
  if (themePageVer == 1) {
    displayThemeMask();
  }
  retval += '<div class="box borderbox" style="width:700px;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:15px">';
  retval += '<div class=heading><h2>Choose a Theme</h2></div>';
  retval += '<div class=data>';
  retval += '<div class=themeList>';
  var curTheme = getCurrentThemeId();
  retval += getThemeHTMLData(themes, curTheme);
  retval += '</div>';
  retval += '<div class=button_group><a class=button href="javascript:hideThemeDiv()"><span>I\'m Done</span></a></div>';
  retval += '</div>';
  retval += '</div>';
  return retval;
}

function getThemeHTMLData(themes, curTheme) {
  var retval = "";
  var curGroup = "";
  var maxcols = 5, curcol = 0;
  
  var len = themes.styles.length;
  
  for (i = 0; i < len; i++) {
    var style = themes.styles[i];
    
    if (style.groupName != curGroup) {
      if (curGroup != "") {
        retval += finishThemeRow(curcol,maxcols);
        retval += '</table>';
      }
      
      retval += '<div class=themeGroup><h4>' + style.groupName + '</h4><hr></div>';
      curGroup = style.groupName;
      retval += '<table class=themeGroup><tr>';
      curcol = 0;
    }
    
    if (curcol == maxcols) {
      retval += '</tr><tr>';
      curcol = 0;
    }
    
    var selected = (style.guid == curTheme);
    retval += themeCell(style,selected);
    curcol++;
  }
  retval += finishThemeRow(curcol,maxcols);
  retval += '</table>';
  return retval;
}

function finishThemeRow(curcol,maxcols) {
  retval = "";
  while (curcol < maxcols) {
    retval += '<td style="width:125px">&nbsp;</td>';
    curcol++;
  }
  return retval;
}

function themeCell(style, selected) {
  var retval = "";
  var displayName = style.name;
  var shortName = style.name;
  shortName = shortName.replace(/ and /g,' &amp; ');
  var anchor = '<a style="text-decoration:none" href="javascript:' + changeThemeFuncName + '(\'' + style.guid + '\',' + style.pageVer + ')" title="' + displayName + '">';
  if (selected) {
    retval += '<td id="cel' + style.guid + '" class="selected">';
  } else {
    retval += '<td id="cel' + style.guid + '">';  
  }
  
  retval += '<div id="thm' + style.guid + '">';
  retval += anchor + '<div id="nam' + style.guid + '" class="namediv">' + shortName + '</div></a>';
  retval += anchor + '<img id="img' + style.guid + '" border=0 src="' + style.previewImage + '" alt="' + displayName + '">' + '</a>';
  retval += '</div>';
  retval += '</td>';     
  return retval;   
}

function hideThemeDiv() {
  // hide picker div
  var tdiv = getThemeDiv();
  tdiv.style.display = "none";

  // remove mask
  removeThemeMask();
}

function showThemeDiv() {
  getThemeDiv().style.display = "block";
}

function putBlankThemeBack() {
  //alert("test");
  var ssb = document.getElementById("main_blank");  
  ssb.href = "/ftweb/v2/css/blank.css";
}


function themeReloadPage() {
  window.location.reload();
}

function changeThemeId(id, pageVer) {
  if ((pageVer == 1) || (pageVer != themePageVer)) {
    if (themeMode == "guest_logged_in") {
      setThemeCookie(id);      
      themeReloadPage();    
    } else
    if (themeMode == "not_logged_in") {
      setThemeCookie(id);      
      themeReloadPage();
    } else {
      var sUrl = '/ftweb/bin/ft.dll/themeChanged?ssid=' + id;  
      sUrl += '&page=' + themePage;
      var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, {success:themeReloadPage, failure:themeReloadPage} );
    }
    return;     
  }

  curid = getCurrentThemeId();
  if (curid != "") unMarkCurrentTheme(curid);
  
  markCurrentTheme(id);
  
  themePageVer = pageVer;
 
  var ssb = document.getElementById("main_blank");
  var ss = document.getElementById("main_ss");
  if ((ss) && (ssb)) {
    old = ss.href;
    ssb.href = old;
    ss.href = "/ftweb/bin/ft.dll/styles.css?ssid=" + id;
    setTimeout(putBlankThemeBack, 500);
    //ssb.href = "/ftweb/v2/css/blank.css";
  }
  
  if (themeMode == "not_logged_in") {
    setThemeCookie(id);  
  }

  if (themeMode == "guest_logged_in") {
    setThemeCookie(id);  
  }

  
  if (themeMode == "owner_logged_in") {
    var sUrl = '/ftweb/bin/ft.dll/themeChanged?ssid=' + id;  
    sUrl += '&page=' + themePage;
    var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, {} );   
  }
}

function markCurrentTheme(id) {
  var cel = document.getElementById('cel' + id);  
  if (cel) cel.className = "selected";
}

function unMarkCurrentTheme(id) {
  var cel = document.getElementById('cel' + id);    
  if (cel) cel.className = "";
}


function getCurrentThemeId() {
  var retval = "";
  var sc = document.getElementById("main_ss");
  if (sc) {
    var url = sc.href;
    var ndx = url.indexOf('ssid=');
    if (ndx >= 0) {    
      retval = url.substring(ndx + 5);
    }
  }
  return retval;
}


function setThemeCookie(id) {
  var options = {};
  var expires = new Date();
  expires.setDate(expires.getDate()+365);
  options.expires = expires;
  options.path = "/";
  YAHOO.util.Cookie.set('guest_style', id, options);
}

function changeTheme(name) {
  ss = document.getElementById("main_ss");
  if (ss) ss.href = "/ftweb/v2/css/fototime_" + name + ".css";
}


  


var themesobj = null;
var curSection = "";
var themeDlgId = -1;

function showThemesDlg(name) {
  curSection = name;
  var formelem = document.SelectStyles.elements[name];
  if (formelem != null)
    themeDlgId = formelem.value
  else {
    var formelem = document.SelectStyles.elements[name + 'style'];
    if (formelem != null)
      themeDlgId = formelem.value;
  }
  var sUrl = '/ftweb/bin/ft.dll/getThemeOptions?themePage=selectDisplayStyles';
  //var tp = themePage;
  //if (!themePage) themePage = "default";
  //sUrl += '?themePage=' + themePage;
  var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callbackThemesDlg); 
}

var callbackThemesDlg = { success:themesDlgLoaded, failure:themesDlgFailed };


function themesDlgLoaded(o) {
  if(o.responseText != undefined) {
    if (!verifySessionOk(o.responseText,false)) return;
    try {

      themesobj = o.responseText.parseJSON();
      changeThemeFuncName = "selectThemeId";

      var html = getThemeHTMLData(themesobj, themeDlgId);
      var divelem = document.getElementById("themedata");
      divelem.innerHTML = html;
      YAHOO.ft.themesDlg.show();		
    } 
    catch (e) {
     alert(e);
    }
  }
}

function themesDlgFailed() {
  alert("Unable to show theme dialog");
}

function themesDlgCancel() {
  YAHOO.ft.themesDlg.hide();
}



function selectThemeId(id, pageVer) {
  var imgelem = document.getElementById('pimg' + curSection);
  var nameelem = document.getElementById('spstyle' + curSection);
  var len = themesobj.styles.length;
  for (i = 0; i < len; i++) {
    var style = themesobj.styles[i];
    if (style.guid == id)
    {
      imgelem.src = style.previewImage;
      nameelem.innerHTML = style.name + ' (' + style.pageVer + ')';
      var formelem = document.SelectStyles.elements[curSection + 'style'];
      if (formelem != null)
        formelem.value = id
      else {
        var formelem = document.SelectStyles.elements[curSection];
        if (formelem != null)
          formelem.value = id
      }
      if (curSection != 'default') {
        var spelem = document.getElementById('spusedflt' + curSection);
        spelem.innerHTML = '&nbsp;| <a href="javascript: useDefault(\'' + curSection + '\');">Use Default</a>';
      }
      break;
    }
  }
  if (curSection == 'default') {
    var len = document.SelectStyles.length;
    for (i=0; i < len; i++) {
      var elem = document.SelectStyles.elements[i];
      if (elem.value == "")
      {
        var imgelem = document.getElementById('pimg' + elem.name);
        if (imgelem != null)
          imgelem.src = style.previewImage;
        var nameelem = document.getElementById('spstyle' + elem.name);
        if (nameelem != null)
          nameelem.innerHTML = 'Default - ' + style.name + ' (' + style.pageVer + ')';
      }
    }
  } 
  YAHOO.ft.themesDlg.hide();
}

function useDefault(name) {
  curSection = name;
  var formelem = document.SelectStyles.elements[name];
  if (formelem != null)
    formelem.value = '';
  else {
    var formelem = document.SelectStyles.elements[name + 'style'];    
    if (formelem != null)
      formelem.value = '';
  }
  var imgelem = document.getElementById('pimg' + curSection);
  var nameelem = document.getElementById('spstyle' + curSection);
  var defelem = document.getElementById('spstyledefault');

  var defimgelem = document.getElementById('pimgdefault');

  imgelem.src = defimgelem.src;
  nameelem.innerHTML = 'Default Style - ' + defelem.innerHTML;

  var spelem = document.getElementById('spusedflt' + curSection);
  spelem.innerHTML = '';
}