var baseUrl = '';
var mainSiteUrl = '';

function doPreview(){
  setModeControls();

  //alert('hello');	
  var params = '';

  params = addParameter(params, 'mode');
  params = addParameter(params, 'order');
  params = addParameter(params, 'start');
  params = addParameter(params, 'end');
  params = addParameter(params, 'current');
  params = addParameter(params, 'units');
  params = addParameter(params, 'background');
  params = addParameter(params, 'slider');
  params = addParameter(params, 'titleFont');
  params = addParameter(params, 'titleColour');
  params = addParameter(params, 'counterFont');
  params = addParameter(params, 'counterColour');
  params = addParameter(params, 'text');
  params = addParameter(params, 'target');

  //alert('hello');	
  var url = baseUrl + '?' + params;	

  var e = document.getElementById('previewImage');
  e.src = url;

  var frm = document.forms[0];

  frm['previewUrl'].value = url;
  frm['previewBBCode'].value = '[URL=' + mainSiteUrl + '][IMG]' + url + '[/IMG][/URL]';
  frm['previewHtmlTag'].value = '<a href="' + mainSiteUrl + '"><img src="' + url + '" alt="http://www.widisneysecrets.com/" /></a>';

  return false;
}

function setModeControls(mode){
  var frm = document.forms[0];
  
  var mode = frm['mode'].value;
  switch(mode){
    case('date'):
      enableControl(frm, 'order', false);
      enableControl(frm, 'current', false);
      enableControl(frm, 'units', false);
      break;
    case('number'):
      enableControl(frm, 'order', true);
      enableControl(frm, 'current', true);
      enableControl(frm, 'units', true);
      break;
    default:
      break;
  }
}

function enableControl(frm, controlName, enable){
  var ctl = frm[controlName];
  ctl.disabled = !enable;
}

function getFormValue(frm, key){

  var item = frm[key];
  if(item != null){
    return item.value;
  }

  return null;
}

function addParameter(params, key){
  var frm = document.forms[0];
  var result = params;

  var value = '';

  switch(key){
    case("background"):
      value = getSelectedRadioButtonValue(frm['background']);
      break;
    case("slider"):
      value = getSelectedRadioButtonValue(frm['slider']);
      break;
    default:
      value = getFormValue(frm,key);
      break;
  }

  if(value != null && value.length !=null && value.length > 0){
    if(result != '')
      result += '&';
    result += key + '=' + value;
  }

  return result;
}

function getSelectedRadioButtonValue(rbList){
  for(var i = 0; i < rbList.length; i++){
    if(rbList[i] != null && rbList[i].checked){
      return rbList[i].value;
    }
  }

  return "";
}

function setSelectedRadioButtonValue(rbList,itemId,checked){
  for(var i = 0; i < rbList.length; i++){
    if(rbList[i] != null && rbList[i].value == itemId){
      return rbList[i].checked = checked;
    }
  }

  return "";
}

function imageListItemClicked(listName, itemId){
  var frm = document.forms[0];
  var rbList = null;
  
  switch(listName){
    case('background'):
      rbList = frm['background'];
      break;
    case('slider'):
      rbList = frm['slider'];
      break;
    default:
      break;
  }
  
  if(rbList != null){
    setSelectedRadioButtonValue(rbList,itemId,true);
  }
  
  doPreview();
}

function showFieldInfo(fieldId){
  switch(fieldId){
    case("mode"):
      msg = "Date mode lets you create a Date-based countdown, counting down to a special day!<br /><br />Number mode lets you create a numeric countdow that could be used for many things such as a Disney Fund counter, or Weight-loss tracker.";
      break;
    case("order"):
      msg = "When using Number mode, you should use Direction to indicate if you are counting in Ascending order (from a Low start value to a High start value, 0 to 10), or Descending order Ascending order (from a High start value to a Low start value, 0 to 10)<br /><br />For example, if you were counting the growth of your Disney Fund, you probably want Ascending order. However if you want to use a countdown to track your (fabulous) weight-loss, you probably want Descending order!";
      break;
    case("start"):
      msg = "When in Date mode, the Start field should contain the date your countdown begins (please try and use a safe date format such as 01-Jan-2009, or 2009-01-01)<br /><br />If you are using Number mode, the Start field should contain your starting number (i.e. 100, or 12.34 for example).";
      break;
    case("end"):
      msg = "When in Date mode, the End field should contain the date your countdown finishes (please try and use a safe date format such as 25-Dec-2009, or 2009-12-25)<br /><br />If you are using Number mode, the End field should contain your final target number (i.e. 100, or 12.34 for example).";
      break;
    case("current"):
      msg = "The Current field represents your current progress when using Number mode (i.e. 100, or 12.34 for example)";
      break;
    case("units"):
      msg = "The Units field lets you specify the type of thing you are counting down when in Number mode (i.e. £, $, LLb's, Kilos, % of sanity,  etc...)";
      break;
    case("title"):
      msg = "You should type a short message to be displayed on your Countdown in the Title field";
      break;
    case("target"):
      msg = "You can type a short message to be displayed once your countdown has reached it's target!";
      break;
    default:
      break;
  }
  
  
  var e = document.getElementById("countdownSettingsHelp");
  if(e != null){
    e.innerHTML = msg;
  }
}