// stores the current status and model selection
var CurrentParam = 0;
var CurrentModel = new Model();
var CurrentParamValue = 0;

// for intro
var IntroInterval = null;
var IntroIndex = -1;
var IntroDidChange = true;

//////////////////////////////////////////////////////////////////////////////////////////////////////
// set the selector to a certain param. 

function ChangeParam(param)
{
  if (param >= CurrentParam) { alert("called changeparam with a param not before current one!"); return; }
  // all from this one up to the current one (excl.) must be removed
  for (var i = param; i < CurrentParam; i++)
  {
    $("#selector-" + i.toString()).hide();
  }
  $("#selector-active-" + CurrentParam.toString()).hide();
  
  CurrentParam = param;
  CurrentParamValue = CurrentModel.getIndexedData(CurrentParam);
  
  // don't need to prepare because old choices are still in. 
  ShowParam(CurrentParam);
  
  ResetPreviewImages();
  MarkCurrentParam();
}

function FinishParam() // need no argument because has to be CurrentParam
{
  if (CurrentParam == ParamsCount)
  {
    StartOrder();
    return; 
  }
  
  $("#selector-active-" + CurrentParam.toString()).hide();
  
  // put in chosen alternative here
  var selected = CurrentModel.getIndexedData(CurrentParam);
  var items = $("#selector-" + CurrentParam.toString() + "> * > .selector-item");
  for (var i = 0; i < items.length; i++)
  {
    if (i != selected)
      items.eq(i).hide();
    else
      items.eq(i).show();
  }
  $("#selector-" + CurrentParam.toString()).show();
  
  PrepareParam(CurrentParam + 1);
}

function PrepareParam(param)
{
  
  CurrentParam = param;
  
  if (CurrentParam < ParamsCount)
  {
    // do the preparing work here.
    var names = NameCollection.getItemsByModel(CurrentParam, CurrentModel);
    var prices = PriceCollection.getItemsByModel(CurrentParam, CurrentModel);

    if (names.length != prices.length) alert("there's something wrong!");
    if (names.length == 0) alert("there's also something wrong!");
    
    // param value is preserved except larger then items list 
    if (CurrentModel.getIndexedData(CurrentParam) >= names.length)
      CurrentModel.setIndexedData(CurrentParam, 0);
    CurrentParamValue = CurrentModel.getIndexedData(CurrentParam);
    
    var cont = $("#selector-" + CurrentParam.toString() + "> .selector-cont");
    var activecont = $("#selector-active-" + CurrentParam.toString() + "> .selector-cont");
    
    cont.find(".selector-item").remove();
    activecont.find(".selector-item").remove();
    
    var contafter = cont.find(".selector-foot");
    var activecontafter = activecont.find(".selector-foot");
    
    for (var i = 0; i < names.length; i++)
    {
      var hash = {
        index: i,
        price: (prices[i] > 0 ? ' <span class="selector-price">€ ' + prices[i].toString() + ',-</span>' : ""),
        name: names[i].getHtmlStringWithAdd() 
        };
      
      var temp = $.template('<div class="selector-item">${name} <span class="selector-item-price">${price}</span></div>');
      var activetemp = $.template('<div class="selector-item"><a href="" onmouseover="PreviewParam(${index});" onmouseout="UnPreviewParam();" onclick="SetParam(${index}); return false;">${name}</a> <span class="selector-item-price">${price}</span></div>');
      
      contafter.before(temp, hash);
      activecontafter.before(activetemp, hash);
    }
    
    
    MarkCurrentParam();
    
    UpdateLanguage(); 
    
    ShowPreviewImage(true);

    UpdatePrice();
  }
  
  ShowParam(CurrentParam);
}

function ShowParam(param)
{
  $("#selector-active-" + param.toString()).show(500);
  ShowParamCaption(CurrentParam);
}

function ShowParamCaption(param)
{
  var c = $("#preview-step h1")
  c.html((param + 1).toString() + ". " + SelectorHeadlines[param].getHtmlString());
  UpdateLanguage();
  c.hide();
  c.fadeIn(500);
}

function PreviewParam(value)
{
  if (CurrentModel.getIndexedData(CurrentParam) == value) return;
  // do the display cleanup here
  //ShowPreviewImage(false);
  
  //CurrentModel.setIndexedData(CurrentParam, value);
  //UpdatePrice();
  
  // do the display here
  //ShowPreviewImage(true);
  
  //MarkCurrentParam();
}

function UnPreviewParam()
{
  PreviewParam(CurrentParamValue);
}

function SetParam(value)
{
  if (CurrentModel.getIndexedData(CurrentParam) == value) return;
  // do the display cleanup here
  ShowPreviewImage(false);
  
  CurrentModel.setIndexedData(CurrentParam, value);
  UpdatePrice();
  
  // do the display here
  ShowPreviewImage(true);
  
  CurrentParamValue = value;
  
  MarkCurrentParam();

}

function MarkCurrentParam()
{
  $(".selector-item").removeClass("selected-item");
  $("#selector-active-" + CurrentParam.toString() + " .selector-item").eq(CurrentModel.getIndexedData(CurrentParam)).addClass("selected-item");
}

function UpdatePrice()
{
  $("#price").text(
    PriceCollection.getDataSumByModel(CurrentParam, CurrentModel).toString()
    );
}


//// images ////////////////////////////////////////////////////////////////////////////////
function ShowPreviewImage(show) // shows or hides the image for the current param value
{
  if (CurrentParam == ParamsCount - 1) return; // the custom don't need image change! 
  
  var data = ImageCollection.getDataByModel(CurrentParam, CurrentModel);
  
  if (isArray(data))
  {
    for (var i = 0; i < data.length; i++)
    {
      if (show) ShowImageExclusive(data[i]); else data[i].hide(); //fadeOut(500);
    }
  }
  else
  {
    if (show) ShowImageExclusive(data); else data.hide(); //.fadeOut(500);
  } 
}

function ShowImageExclusive(item)
{
  var itemid = item.attr("id");
  var itemclass = itemid.split("-")[0];
  
  // a related image may still be displayed from the previous step.
  // therefore hide all visible images with id starting with same class except this one. 
  $("[id^=" + itemclass + "]:visible").filter("[id!=" + itemid + "]").fadeOut(500);
  item.fadeIn(500);
}

function ResetPreviewImages() // removed all images and build the currently needed ones newly.
{
  // remove all.
  $(".work").hide();
  
  // build newly.
  var save = CurrentParam;
  var max = CurrentParam < ParamsCount ? CurrentParam : ParamsCount - 1;
  for (CurrentParam = 0; CurrentParam <= max; CurrentParam++)
  {
    ShowPreviewImage(true);
  }
  CurrentParam = save;
}

function InitImages()
{
  var params = new Array();
  for (var i = 0; i < ParamsCount; i++) params.push(0);
  
  for (var i = 0; i < NameCollection.getItems(0, params).length; i++) // series
  {
    params[0] = i;
    ImageCollection.setData(0, params, CreatePreviewImage(new Array("Case", i + 1, 1, 1)));
    
    for (var j = 0; j < NameCollection.getItems(1, params).length; j++)  // case color
    {
      params[1] = j;
      ImageCollection.setData(1, params, CreatePreviewImage(new Array("Case", i + 1, j + 1, 1)));
      
      for (var k = 0; k < NameCollection.getItems(2, params).length; k++) //movement
      {
        params[2] = k;
        ImageCollection.setData(2, params, new Array(
          CreatePreviewImage(new Array("Case", i + 1, j + 1, k + 1)),
          CreatePreviewImage(new Array("Dial", i + 1, k + 1, 1))
          ));
        
        for (var l = 0; l < NameCollection.getItems(3, params).length; l++) // dial
        {
          params[3] = l;
          ImageCollection.setData(3, params, CreatePreviewImage(new Array("Dial", i + 1, k + 1, l + 1)));
          
          for (var m = 0; m < NameCollection.getItems(4, params).length; m++) //band
          {
            params[4] = m;
            ImageCollection.setData(4, params, CreatePreviewImage(new Array("Band", i + 1, m + 1)));
          }
        }
      }
    }
  }
}

function CreatePreviewImage(nameparts)
{
  var name = nameparts.join("-");
  var cont = $("#preview");
  
  var existing = cont.find("#" + name);
  if (existing.length == 1)
  { 
    return existing;
  }
  
  var hash = DefaultHash({
    name: name
    });
  
  var temp;
  if (pngprob())
  {
    //temp = '<div id="${name}" class="work" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=\'${basedir}${name}.png\');" />';
    temp = '<div id="${name}" class="work" style="background-image:url(${basedir}${name}.gif);" />';
  } 
  else
  {
    temp = '<div id="${name}" class="work" style="background-image:url(${basedir}${name}.png);" />';
  } 
  
  cont.append($.template(temp), hash);
  
  var result = $("#" + name);
  result.hide();
  
  return result;
}

function pngprob()
{
  if ($.browser.msie)
  {
    var maj = $.browser.version.substr(0, 1);
    if (maj < 7)
    {
      return true;
    }
  }
  return false;
}

///////////////////////////////////////////////////////////////////////////////////////////////////////
// intro
function PlayIntro()
{
  IntroInterval = window.setInterval(PlayIntroStep, 2000);
  $(".work, #preview-step").css("cursor", "hand").attr("title", StartLinkNoHtml.getString()).click(Start);
}

function PlayIntroStep()
{
  if (!IntroDidChange)
  {
    var names = NameCollection.getItemsByModel(CurrentParam, CurrentModel);
    
    //ShowPreviewImage(false);
    
    var value;
    if (IntroIndex == 3 || IntroIndex == 1)
    {
      // at the case color and the dial step, 
      // try to take another than the first because the 
      // dial is already shown for the movement. 
      if (names.length > 1)
        value = parseInt(1 + Math.random() * (names.length - 1));
      else
        value = 0;
    }
    else
    {
      value = parseInt(Math.random() * names.length);
    }
    
    CurrentModel.setIndexedData(CurrentParam, value);
    
    ShowPreviewImage(true);
    
    IntroDidChange = true;
  }
  else
  {
    IntroIndex++;
    if (IntroIndex >= 6) 
    {
      // finished, so reset
      IntroIndex = 0;
      
      CurrentParam = 0;
      CurrentModel = new Model();
      CurrentParamValue = 0;
      
      $(".work").hide();
    }
    else if (IntroIndex > 4)
    {
      // skip two times so the finished model stays a little bit longer, da da...
      return;
    }
    
    ShowParamCaption(IntroIndex);
    
    CurrentParam = IntroIndex;
    
    //ShowPreviewImage(true);
    
    IntroDidChange = false;
  }
}

function StopIntro()
{
  window.clearInterval(IntroInterval);
  
  CurrentParam = 0;
  CurrentModel = new Model();
  CurrentParamValue = 0;
  
  $(".work").hide();
  $(".work, #preview-step").css("cursor", "auto").attr("title", "").unbind();
}

//////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////
// start
function Init()
{ 
  BuildMainPage();
  InitLanguage(1);
  InitImages();
  
  //PreloadImages();
  Release();
  PlayIntro();
}

function Release()
{
  $("#wait-message").hide();
  $("#start-link").show();
  //$("#preview-step h1").html('<a href="" onclick="Start(); return false;">' + StartLink.getHtmlString() + '</a>');
  // *** no longer needed because we have the intro now.
  $("#preview-step h1").html('');
  UpdateLanguage();
  //$("#footer").prepend('<div><a onclick="Start(); for (var i = 0; i < ParamsCount; i++) FinishParam(); return false;">Test</a></div>'); // **************
  //$("#footer").prepend('<a href="" onclick="CloseOrderForm(); return false;">Close Order Form</a>');// **************
}

function Start()
{
  StopIntro();
  
  $("#welcome-div").hide();
  PrepareParam(0);
  ResetPreviewImages();
}

function BuildMainPage()
{
  // build top nav
  if (IsCustomer)
  {
    var linktemplate; var linkhash;
    linktemplate = $.template('<a href="${href}" target="_blank">${title}</a>');
    
    linkhash = { href: "http://www.uhr-kraft.com/", title: "Uhr-Kraft Web Site" };
    $("#header-links").append(linktemplate, linkhash);
    linkhash = { href: "http://www.uhr-kraft-store.com/", title: "Online Store" };
    $("#header-links").append(linktemplate, linkhash);
    
    linktemplate = $.template('<a href="" onclick="${target}">${title}</a>');
    
    linkhash = { title: ShippingTitle.getHtmlString(), target: "ShowShipping(); return false;" };
    $("#header-links").append(linktemplate, linkhash);
    
    linkhash = { title: RetailerListTitle.getHtmlString(), target: "ShowRetailerList(); return false;" };
    $("#header-links").append(linktemplate, linkhash);
  }
  $("#header-links > a").before("|");
  for (var i = 0; i < LanguagesCount; i++)
  {
    if (Languages[i] != "gr")
    {
      var hash = DefaultHash({
        index: i,
        lan: Languages[i],
        friendly: LanguageFriendlyNames[i]
      });
          
      var temp = $.template('<a href="" id="language-selector-${index}" onclick="LoadLanguage(${index}); return false;"><img alt="${friendly}" src="${basedir}language_${lan}.gif" /></a>');
      $("#header-links").append(temp, hash);
    }
  }
  
  // links in the footer
  if (IsCustomer())
  {
    $("#footer > a").eq(0).click(function() { ShowPrivacy(); return false; });
    $("#footer > a").eq(1).click(function() { ShowImprint(); return false; });
    $("#footer > a").empty();
    $("#footer > a").eq(0).append(PrivacyTitle.getHtmlString());
    $("#footer > a").eq(1).append(ImprintTitle.getHtmlString());
    $("#footer > a").eq(2).append(ContactTitle.getHtmlString());

  }
  else
  {
    $("footer > a").remove();
  }
  linkhash = { title: TermsTitle.getHtmlString(), target: "ShowTerms(); return false;" };
  $("#footer").prepend(linktemplate, linkhash);
  linkhash = { title: DealerInfoTitle.getHtmlString(), target: "ShowDealerInfo(); return false;" };
  $("#footer").prepend(linktemplate, linkhash);
  
  // build selector
  var OrderIndex = ParamsCount;
  for (var i = 0; i <= OrderIndex; i ++)
  {
    var order = (i == OrderIndex);
    var hash = {
      index: i, 
      number: i + 1, 
      headline: SelectorHeadlines[i].getHtmlString(), 
      nextlink: (order ? SelectorOrder : SelectorNext).getHtmlString(),
      changelink: SelectorChange.getHtmlString()       
      };
    var temp = '<div class="selector-div-active" id="selector-active-${index}"><div class="selector-h">${number}. ${headline}</div><div class="selector-cont"><div class="selector-foot"><a href="" onclick="FinishParam(); return false;">${nextlink}</a></div></div></div>';
    if (!order)
      temp += '<div class="selector-div" id="selector-${index}"><div class="selector-h">${number}. ${headline}</div><div class="selector-cont"><div class="selector-foot"><a href="" onclick="ChangeParam(${index}); return false;">${changelink}</a></div></div></div>'; 
    
    $("#selector").append($.template(temp), hash);
  }
  // the order now box
  var OrderBox = $("#selector-active-" + OrderIndex.toString() + " > .selector-cont");
  OrderBox.find(".selector-foot").prepend('<a href="" onclick="ShowRetailerList(); return false;">' + SelectorRetailer.getHtmlString() + '</a><br />');
  OrderBox.prepend('<div class="selector-detail">' + ShippingPrefix.getHtmlString() + '<a href="" onclick="ShowShipping();return false;">' + ShippingLink.getHtmlString() + '</a></div>');
  OrderBox.prepend('<div id="price-item">' + PricePrefix.getHtmlString() + '<span id="price" />' + PriceSuffix.getHtmlString() + '</div>');
  
  // all hidden at first, except welcome
  $(".selector-div, .selector-div-active").hide();
  $("#welcome-div").show();
  
  // build welcome text
  $("#welcome-text").append($.template('<div>${text}</div>'), { text: WelcomeText.getHtmlString() });
  
  // build wait message and start link
  $(".wait-message-static").remove();
  $(".welcome-text-static").remove();
  $("#welcome-text").append($.template('<div id="wait-message">${text}</div>'), { text: WaitMessage.getHtmlString() });
  $("#welcome-text").append($.template('<div id="start-link"><a href="" onclick="Start(); return false;">${text}</a></div>'), { text: StartLink.getHtmlString() });
  $("#start-link").hide();
}

// the thing for the translations to translate

function InitLanguage(language)
{
  CurrentLanguage = language;
  UpdateLanguage();
}

function LoadLanguage(language)
{
  if (language == CurrentLanguage) return;
  $("." + Languages[CurrentLanguage]).hide();
  CurrentLanguage = language;
  $("." + Languages[CurrentLanguage]).show();
}

function UpdateLanguage()
{
  for (var i = 0; i < LanguagesCount; i++)
  {
    if (i != CurrentLanguage)
    {
      $("." + Languages[i]).hide();
    }
  }
  $(".noscript").hide();
}

function UpdateDocumentLanguage(document)
{
  for (var i = 0; i < LanguagesCount; i++)
  {
    if (i != CurrentLanguage)
    {
      document.find("." + Languages[i]).hide();
    }
  }
  document.find(".noscript").hide();
}