#IF(#Shop.DomainName AND NOT #HasCreatedInitialShortURLs)
<script type="text/javascript">
  dojo.require('epages.widget.Message');
  dojo.require('epages.widget.Modaldialog');
  var shorturl_messageWidget = undefined;
  var shorturl_dialogWidget = undefined;
  var monitorSiteUrl = undefined;
  var _stopMonitor = false;
  var _bufferedTotal = 0;

function openShortURLDialog() {
  dojo.require('epages.loaderani');

  var message =  '<p>{CreateShortURLExplain}</p><h4>{PreviewShortURL}</h4>'
#MENU("ShortUrlExamples")#INCLUDE(#Template, "NoDebug")#ENDMENU+'';
  shorturl_messageWidget = new epages.widget.Message({
    headline      : "{CreateShortURLQuestion}",
    message: message,
    sizeClass:"Large",
    typeClass:"Question"
  });

  shorturl_dialogWidget = new epages.widget.Modaldialog({
    options:{
      title : '{DoCreateShortURLNow}',
      width : 450,
      height: 250,
      content: shorturl_messageWidget,
      destroyWidgetOnClose : true
    },
      buttons: [{
        label: '{DoCreateShortURL}',
        onclick: function() { _xhrDoCreateShortURL(); }
       },{
        label: '{Close}',
        onclick: function() { this._modalDialogWidget.hide(); }
      }]
  });
  shorturl_dialogWidget.show();
}

function _xhrDoCreateShortURL() {
  dojo.require("epages.widget.ProgressBar");

  shorturl_messageWidget = new epages.widget.Message({
    headline : "{GeneratingShortURL}",
    message  : '{GeneratingShortURLInfo}'+'<br /><div id="progressBarDiv" preStatusString = "{CreatedShortUrls}" dojoType="epages.widget.ProgressBar"></div>',
    sizeClass: "Large"
  });
  document.body.appendChild(shorturl_messageWidget.domNode);

  var content_options = {
    title : '{DoCreateShortURLNow}',
    width : 450,
    height: 250,
    content : shorturl_messageWidget,
    destroyWidgetOnClose : true
  };
  shorturl_dialogWidget.setupContent(content_options);
  dojo.subscribe(shorturl_dialogWidget.id+'/hide',_dialogClosed);
  dojo.xhrPost({
    url: epages.vars.BaseUrl,
    load: _xhrStartMonitoring,
    content:{
      ChangeAction : 'SaveShortUrls',
      ObjectID   : '#Shop.ID',
      ViewAction   : 'MBO-ViewShortUrlMonitor'
    },
    handleAs: "json"
  });
}
function _dialogClosed(){
  _stopMonitor = true;
  dojo.addClass($('ShortURL_Created'), 'HideElement');
  dojo.addClass($('ShortURL_Create'), 'HideElement');
  dojo.removeClass($('ShortURL_Creating'), 'HideElement');
}
function _xhrDoMonitorPageRequest(){
  if(!_stopMonitor){
    dojo.xhrGet({
      url: monitorSiteUrl,
      load: _xhrDoCreateShortURL_requestOk,
      error: function(data,args){
        console.warn("Warning: Creating shortlURL xhrDoMonitorPageRequest() "+data.name+": "+data.message);
        // Force Dialog to close
        _xhrDoCreateShortURL_requestOk({
          total       : _bufferedTotal,
          progress    : _bufferedTotal,
          refreshURL  : ""
        });
      },
      handleAs: "json"
    });
   }
}
function _xhrStartMonitoring(result){
  if(result && result.refreshURL) {
    monitorSiteUrl = "#Site.ProtocolAndServerSSL"+result.refreshURL;
    setTimeout(_xhrDoMonitorPageRequest,2000);
  }
}
function _xhrDoCreateShortURL_requestOk(result) {

  if(result) {
    monitorSiteUrl = "#Site.ProtocolAndServerSSL"+result.refreshURL;

    if(result.total != "#PROGRESS.Total")
        result.total = parseInt(result.total);

    result.progress = parseInt(result.progress);
    if(result.total == "#PROGRESS.Total" || result.progress < result.total){
      if(result.total!="#PROGRESS.Total"){
        dojo.publish("progressBarDiv/setMaximum",[result.total]);
        dojo.publish("progressBarDiv/updateProgress",[result.progress]);
        _bufferedTotal = result.total;
      }
      setTimeout(_xhrDoMonitorPageRequest,2000);
    } else {
      dojo.publish("progressBarDiv/updateProgress",[result.total]);
      window.setTimeout(function(){
        shorturl_dialogWidget.close();
        dojo.removeClass($('ShortURL_Created'), 'HideElement');
        dojo.addClass($('ShortURL_Create'), 'HideElement');
        dojo.addClass($('ShortURL_Creating'), 'HideElement');
        $$('progressBarDiv').destroyRecursive();
      },400);
    }
  }
}
</script>
#ENDIF

#IF(NOT #IsPageCacheUsed)
<script type="text/javascript">
  function enablePageCache(){
    pageCache_Publish(function(){
      $('PageCacheMessageInfo').setAttribute("class","MessagePositiveResult");
      dojo.require("dojo.fx");
      dojo.fx.wipeOut({node:$('PageCacheMessageInfoLink'), duration: 600}).play();
      dojo.fx.wipeOut({node:$('PageCacheMessageInfoText'), duration: 600}).play();
    });
  }
</script>
#ENDIF
<script type="text/javascript">
(function($){
  $(document)
    .on('metaparse', function(){
      //START binds for dashboard
      ep('.addWidget').on('click',function(evt){
        ep('.Dashboard').trigger('showAddWidgetDialog');
        evt.stopPropagation();
        evt.preventDefault();
      });
       ep('.Dashboard').on('dashboardEmpty',function(evt){
         ep('#ep-DashboardAddLinkBig').show();
      });
       ep('.Dashboard').on('dashboardUsed',function(evt){
        ep('#ep-DashboardAddLinkBig').hide();
      });
      //END binds for dashboard

      de_epages('.Dashboard').shopUiDashboard({
        'userId': #Session.User.ID
      });
      //setDashboard function to change between dashboard and normal startpage
      var _setDashboard = function(state){
        ep.ajax({
          type: 'POST',
          dataType: 'json',
          data: {
            'ViewAction': 'JSONViewResponse',
            'ChangeAction': 'SetStartPageTab',
            'ObjectID': '#Session.User.ID',
            'StartPageTab': state
          }
        });
      };

      ep('#DashboardArea').on('click',function(evt){
        epagesDialog.toggleArea('DashboardArea');
        _setDashboard(1);
        evt.stopPropagation();
        ep('#ep-DashboardAddLink').show();
        return false;
      });
      ep('#OverviewArea').on('click',function(evt){
        epagesDialog.toggleArea('OverviewArea');
        _setDashboard(0);
        evt.stopPropagation();
        ep('#ep-DashboardAddLink').hide();
        return false;
      });
      ep('#NextStepsArea').on('click',function(evt){
          epagesDialog.toggleArea('NextStepsArea');
          _setDashboard(2);
          evt.stopPropagation();
          ep('#ep-DashboardAddLink').hide();
          return false;
        });
    #REM
    // TODO: call custom event on body to build dojo widgets inside dashboard widgets
    // please remove this call if there are no longer dojo widgets inside dashboard
    #ENDREM
    $('body').trigger('DashboardDialogReadyDojoConnector');
  });
})(jQuery);
</script>
#INCLUDE("StartPageScriptsMenu")
#IF(#Shop.Logo)<a href="#IF(#Shop.DomainName)#Shop.ProtocolAndServer#ELSE#Shop.WebUrl#ENDIF" onclick="openWindow(this.href, '#Shop.Alias', ''); return false;" #IF(#Shop.ClosedByMerchant) title="{StorefrontClosed}"#ELSE title="{OpenStartPage}"#ENDIF
><img class="FloatRight LeftPadding BottomPadding ShopLogo" src="#Shop.Logo[webpath]" alt="#Shop.Name" title="#Shop.Name" border="0" /></a>#ENDIF

<h1 class="NoMargin">{Welcome}</h1>
<p class="WelcomeText">
  #IF(#Shop.MerchantWelcomeText) #Shop.MerchantWelcomeText[0]#ENDIF
</p>
<div class="ClearBoth" ></div>
#LOCAL("MessageCount", 0)
  #IF(NOT #MailFrom)#SET("MessageCount", #MessageCount+1)#ENDIF
  #IF(NOT #IsPageCacheUsed)#SET("MessageCount", #MessageCount+1)#ENDIF
  #IF(#Shop.DomainName AND NOT #HasCreatedInitialShortURLs)#SET("MessageCount", #MessageCount+1)#ENDIF
  #IF(#FUNCTION("MENU_COUNT", "StartPageMessageCenterMenu") > 0) #SET("MessageCount", #MessageCount+#FUNCTION("MENU_COUNT", "StartPageMessageCenterMenu")) #ENDIF
  #IF(#MessageCount)
  <div class="MessageCenter">
    #IF(#MessageCount > 1)
    <h1>{CurrentSystemMessages}</h1>
    #ENDIF

    #IF(NOT #MailFrom)
      <div class="MessageWarning">
        <h4>{MissingMailFromAddress}</h4>
        <a class="DialogAction" href="?ViewAction=MBO-ViewGeneral&amp;ObjectID=#Shop.ID&amp;ChangeAction=NewShopMailType&amp;Alias=CustomerWelcome">{GotoEmailSettings}</a>
      </div>
    #ENDIF

    #IF(#Shop.DomainName AND NOT #HasCreatedInitialShortURLs)
    <div class="MessageNew" id="ShortURL_Create">
      <h3>{UseShortURL}</h3>
      {UseShortURLInfo}<br />
      <a href="#" class="DialogAction" onclick="openShortURLDialog(); return false;">{DoCreateShortURLNow}</a>
    </div>
    <div class="HideElement MessageInfo" id="ShortURL_Creating">
      <h3>{ShortUrlCreationInProgress}</h3>
      <br />
    </div>
    <div class="HideElement MessagePositiveResult" id="ShortURL_Created">
      <h3>{ShortURLFinished}</h3>
      {ShortURLFinishedInfo}<br />
      <a href="#" class="DialogAction" onclick="openWindow('#System.DocRoot/Help/{HelpLanguageID}/SEO/index.htm','','HelpWindow'); return false;">{ShowSEOGuide}<img class="AlignBottom" title="{OpenInNewWindow}" alt="{OpenInNewWindow}" src="#System.StoreRoot/BO/icons/ico_xs_openinpopup.png"/></a>
    </div>
    #ENDIF

    #MENU("StartPageMessageCenterMenu")
      #INCLUDE(#Template)
    #ENDMENU
  </div>
  #ENDIF
#ENDLOCAL

#IF(#System.ScheduledDowntimeStart)
  #LOCAL("DateTimeStart",#System.ScheduledDowntimeStart[datetime])
  #LOCAL("DateTimeEnd",#System.ScheduledDowntimeEnd[datetime])
  <div style="color: #ea3333">
    <p><i class="Sprite ico_s_warning RightMargin"></i>{MaintenanceNote}</p>
  </div>
  #ENDLOCAL
  #ENDLOCAL
#ENDIF

<div class="epTabContainer dashBoardHeader">
  <a name="NextStepsArea" id="NextStepsArea" href="#" onclick="return false;" class="HideArea">{GettingStarted}</a>
  <a name="OverviewArea" id="OverviewArea" href="#" onclick="return false;" class="HideArea">{Overview}</a>
  <a name="DashboardArea" id="DashboardArea" href="#" onclick="return false;" class="HideArea">{Dashboard}</a>
</div>
<div id="DashboardContent" class="HideElement ClearRight">

  <ul class="Dashboard ui-corner-all NoMargin">
    #LOCAL("CurrentShop",#Shop)
      #LOOP(#Session.User.MBOWidgets)
        #INCLUDE("WidgetBase")
      #ENDLOOP
    #ENDLOCAL
    <li id="ep-DashboardAddLink" class="ep-DashboardWidget ui-widget ep-FixedNode addWidget"><a href="" onclick="return false;"><span>+</span>{AddWidgets}</a></li>
  </ul>
</div>

<div id="OverviewContent" class="HideElement">
  <div class="InfoPage">
    <div class="Dialog">
      #MENU("StartPageMenu")
        <div class="MinimizeHeight"></div>
        <div class="FloatLeft HalfWidth">#INCLUDE(#Template)<span class="HideElement">&nbsp;</span></div>
        #REM<!-- the span element is a bugfix for IE7 do not remove it !! -->#ENDREM
      #ENDMENU
    </div>
  </div>
</div>

<div id="NextStepsContent" class="HideElement">
  <div class="Dialog">
    <ul id="NextStepsList" class="FloatLeft">
      #REM Performance: Avoid fetching the shop attribute 'NextSteps' multiple times! #ENDREM
      #LOCAL("Steps", #NextSteps)
        #MENU("NextStepsMenu")
          #INCLUDE(#Template)
        #ENDMENU
      #ENDLOCAL
    </ul>
    #IF(#System.VideoShopIntroURL)
      <div class="VideoShopIntro FloatLeft">
       <div id="ep-videoplayer" class="VideoPlayer">
        #IF(#Shop.FeatureMaxValue.Basket)
        <video controls poster="#System.StoreRoot/BO/video/shopintro_video.png" preload="none">
          <source src="#System.VideoShopIntroURL#SPACE[0].mp4" type="video/mp4">
          <source src="#System.VideoShopIntroURL#SPACE[0].ogv" type="video/ogg">
        </video>
        #ELSE
        <video controls poster="#System.StoreRoot/BO/video/shopintro_video.png" preload="none" style="display:none;">
          <source/>
        </video>
        #ENDIF
      </div>
     </div>
     #ENDIF
    <br class="ClearBoth" />
  </div>
</div>
<script type="text/javascript">
jQuery.ready({
    plugin:"jQuery.tmpl",
    DOM: true
  }, function ($) {

  $('#ep-videoplayer video').one('play', function (event) {
    // Hide title, when playing video.
    $('#ep-videoplayer-title').hide();
  });

  $('#NextStepsList').on('click', 'li span.CommandLinkSmall', function (event) {
    // `this` is part of an `a` tag, so we need to call `preventDefault`.
    event.preventDefault();

    var video = $('#ep-videoplayer video'),
        videoName = $(this).data('tutorialVideo'),
        videoPath = 'https://videos.epages.com/checklist/615/' + videoName + '_' + '{HelpLanguageID[js]}',
        videoNode = video.get(0);

    // `video` tag is already in place just change the source and reload.
    video
      .children('source').each(function () {
        $(this).attr('src', videoPath + (this.type === 'video/mp4' ? '.mp4' : '.ogv'));
      });

    video.show();
    videoNode.load();
    videoNode.play();
  });

  $('#NextStepsList li.stepReady:first a > span:last-child')
    .show()
    .css({
      'opacity': 1,
      'display': 'inline-block',
      'visibility': 'visible'
    });
  $('#NextStepsList li.stepReady:first')
    .addClass('stepHover');

#REM
  /*
   * Register Areas
   * Usage: epagesDialog.addArea([name attribute of the link tag], [id attribute of the layer]);
   */
#ENDREM
  epagesDialog.addArea('DashboardArea', 'DashboardContent');
  epagesDialog.addArea('OverviewArea', 'OverviewContent');
  epagesDialog.addArea('NextStepsArea', 'NextStepsContent');

#REM /* Set NextSteps label */ #ENDREM

#REM /* Show area... */ #ENDREM
  epagesDialog.showArea('NextStepsArea');

#REM /* ... to get all steps that are visible... */ #ENDREM
  var NextStepsDoneCount = jq('#NextStepsList').children('li.stepReady1:visible').length,
      NextStepsTotalCount = jq('#NextStepsList').children(':visible').length,
      NextStepsFirstVisible = jq('#NextStepsList').children('.next-step-list-item.stepReady:visible').eq(0);

#REM /* add class to the first visible Step and set styles for the contained span for additional information */ #ENDREM
  NextStepsFirstVisible
    .addClass("stepHover")
    .find("span.AdditionalInfo").css({
      'opacity': 1,
      'display': 'inline-block',
      'transition': 'none'
    });

#REM /* ... and hide it again when we have our count */ #ENDREM
  epagesDialog.hideArea('NextStepsArea');

  $('#NextStepsArea')
    .html(
      $.tmpl(
        "<span>" + (NextStepsDoneCount < NextStepsTotalCount ? "{GettingStarted[js]}: {TaskProgress[js]}" : "{GettingStarted[js]}: {Done[js]}") + "</span>",
        [{
          NextStepsDoneCount: '<span class="next-steps-resolved">' + NextStepsDoneCount + '</span>',
          NextStepsTotalCount: '<span class="next-steps-totalamount">' + NextStepsTotalCount + '</span>'
        }]
      )
      .text()
    );

  if(NextStepsDoneCount == NextStepsTotalCount){
    $('#NextStepsArea').detach().appendTo('.epTabContainer');
  }

  #LOCAL("StartPageTab",#Session.User.StartPageTab)
  #IF(NOT #DEFINED(#StartPageTab))#SET("StartPageTab",0)#ENDIF
  #IF(#DEFINED(#INPUT.DialogArea))
    #IF(#INPUT.DialogArea EQ "OverviewArea")
      epagesDialog.showArea('OverviewArea');
    #ELSIF(#INPUT.DialogArea EQ "DashboardArea")
      epagesDialog.showArea('DashboardArea');
    #ELSE
      epagesDialog.showArea('NextStepsArea');
    #ENDIF
  #ELSE

  if( NextStepsDoneCount < NextStepsTotalCount ){
    epagesDialog.showArea('NextStepsArea');
  }
  else{
    #IF(NOT #Shop.NextStepsCompleted)
#REM /* set list completed attribute */ #ENDREM
    jQuery.ready('ep.ajax',function(){
      ep.ajax({data:[{name:"ObjectID",value:"#Shop.ID"},{name:"ViewAction",value:"JSONViewResponse"},{name:"ChangeAction",value:"Save"},{name:"NextStepsCompleted",value:"1"}]});
      ep.ajax({
        type: 'POST',
        dataType: 'json',
        data: {
          'ViewAction': 'JSONViewResponse',
          'ChangeAction': 'SetStartPageTab',
          'ObjectID': '#Session.User.ID',
          'StartPageTab': 0
        }
      });
    });
    #ENDIF

    switch (#StartPageTab) {
      case 0:
        // Display Dashboard when we don't have an overview area (1&1 DIY)
        if ($('#OverviewArea').is(':visible')) {
          epagesDialog.showArea('OverviewArea');
        } else {
          epagesDialog.showArea('DashboardArea');
        }
        break;
      case 1:
        epagesDialog.showArea('DashboardArea');
        break;
      case 2:
        epagesDialog.showArea('NextStepsArea');
        break;
      default:
        epagesDialog.showArea('OverviewArea');
        break;
    }
  }

  #ENDIF
  #ENDLOCAL

  #IF(#FormError)
    epagesDialog.showArea('DashboardArea');
    epagesDialog.showArea('OverviewArea');
    epagesDialog.showArea('NextStepsArea');
    actualDialogArea = '';
  #ENDIF
});
</script>