$(document).ready(
  function ()
  {
    var prefixname = 'images/tabs/first-tab_';
    var leftBorderNormal = 41;
    var leftBorderHover = 41;
    var leftBorderSelected = 41;
    var rightBorderNormal = 7;
    var rightBorderHover = 7;
    var rightBorderSelected = 7;

    $('#firsttab .tab').LayerButton(
      {
        'groupID':        'firsttab',
        'normal':
        {
          'imageSource':  { 'prefix': prefixname, 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderNormal, 'left': leftBorderNormal }
        },
        'hover':
        {
          'imageSource':  { 'prefix': prefixname +'hover_', 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderHover, 'left': leftBorderHover }
        },
        'selected':
        {
          'imageSource':  { 'prefix': prefixname + 'active_', 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderSelected, 'left': leftBorderSelected },
          'onShow':       function (element) {
                            $(element).addClass('active');
                            $.LayerButton.updateLayerDimensions(element, 'selected');
                            showPanelForTab(element);
                          },
          'onHide':       function (element) {$(element).removeClass('active');}
        }
      }
    );

    prefixname = 'images/tabs/tab_';
    leftBorderNormal = 7;
    leftBorderHover = 7;
    leftBorderSelected = 7;
    $('#tabs .tab').LayerButton(
      {
        'groupID':        'tabs',
        'normal':
        {
          'imageSource':  { 'prefix': prefixname, 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderNormal, 'left': leftBorderNormal }
        },
        'hover':
        {
          'imageSource':  { 'prefix': prefixname +'hover_', 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderHover, 'left': leftBorderHover }
        },
        'selected':
        {
          'imageSource':  { 'prefix': prefixname + 'active_', 'suffix': '.png' },
          'imageBorders': { 'right': rightBorderSelected, 'left': leftBorderSelected },
          'onShow':       function (element) {
                            $(element).addClass('active');
                            $.LayerButton.updateLayerDimensions(element, 'selected');
                            showPanelForTab(element);
                          },
          'onHide':       function (element) {$(element).removeClass('active');}
        }
      }
    );

    $('#tab-1').attr('lbgroupid', 'tabs');

    var width1 = $('#tabs .taballfunctions').width();
    $('#lasttabcontainer').show();
    var width2 = $('#lasttabinactive .lasttabpanel').width();
    $('#lasttabcontainer').hide();
    if (width1 > width2)
    {
      $('#tabtabcontainer td').css('padding-left', (10 + width1 - width2) + 'px');
    }
    else if (width2 > width1)
    {
      $('.taballfunctions td').css('padding-left', (10 + width2 - width1) + 'px');
    }

    prefixname = 'images/tabs/view_button_';
    $('#tabs .taballfunctions').LayerButton(
      {
        'groupID':        'lasttab',
        'hover':
        {
          'imageSource':  { 'prefix': prefixname + 'hover_', 'suffix': '.png' },
          'imageBorders': { 'right': 2, 'left': 2 }
        }
      }
    );

    $('#lasttabinactive .lasttabpanel').LayerButton(
      {
        'groupID':        'lasttab2',
        'hover':
        {
          'imageSource':  { 'prefix': prefixname + 'hover_', 'suffix': '.png' },
          'imageBorders': { 'right': 2, 'left': 2 }
        }
      }
    );

    $('#tabs .taballfunctions').click(function(event){
      if (!debug)
      {
        call('#tab:tab-6');
      }
      fadein();
    });
    $('#lasttabinactive').click(function(event){
      fadeout();
    });

    initTab('tab-1');

    // mousedown is enough to trigger tabchange
    $('#firsttab .tab, #tabs .tab, #tabs .taballfunctions, #lasttabinactive').mousedown(
      function()
      {
        $(this).click();
      }
    );
  }
);

function fadein(){
  panel6Load();
  //make sure last tab stays visible
  $('#tab-6Fader').css("z-index", "8");
  $('#tab-6Cover').css("z-index", "5");
  $('#lasttab').css("z-index", "-1");
  //simulate text fade out
  $('#tab-6Fader').animate({opacity:1}, 400, function() {

    // Animation complete.
    //display cover for TabMenu
    $('#tab-6Cover').css("visibility", "visible");
    $('#tab-6Cover').width(765 - $('#tab-6').width());
    $('#tab6active').css("display", "none");
    $('#lasttabcontainer').css("display", "inline");
    $('#lasttabcontainer').css("z-index", "10");
    $('#panel, #rescuebutton').hide();
    $('#tuningarea').css('top', '1000px').css('visibility', 'hidden'); // hide does not work as expected for activating turbo mode while hidden
    $('#panel .panel .lb-button').each(
      function ()
      {
        $('#' + $.LayerButton.getLayerID(this, 'normal', this.id)).hide();
      }
    );
    $('#panel6').css("visibility", "visible");
    $('#tab-6Fader').animate({opacity:0}, 100, function() {});
    $('#tab-6Fader').css("z-index", "-1");
    //swap body background
    $('body').css("background-image", "url(images/panel6/ig-background.png)");
  });
}

function fadeout(){
  $('#tab-6Fader').css("z-index", "11");
  $('#tab-6Fader').animate({opacity:1}, 200, function() {
    //hide cover for TabMenu
    $('#tab6active').css("display", "inline");
    $('#lasttabcontainer').css("display", "none");
    $('#lasttabcontainer').css("z-index", "0");
    $('#tab-6Cover').css("visibility", "hidden");
    $('body').css("background-image", "url(images/ig-background.png)");
    $('#panel6').css("visibility", "hidden");
    $('#panel').css('top', '94px').css('visibility', 'visible');
    $('#panel, #rescuebutton').show();
    $('#tuningarea').css('top', '383px').css('visibility', 'visible');
    $('#tab-6Fader').animate({opacity:0}, 150, function() {
      $('#tab-6Fader').css("z-index", "-1");
      $('#tab-6Cover').css("z-index", "-1");
      showPanelForTab('#' + $('.tab.lb-button.active').attr('id'), true);
/*      $('#panel6 .lb-button').each(
        function ()
        {
          $('#' + $.LayerButton.getLayerID(this, 'normal', this.id)).remove();
          $('#' + $.LayerButton.getLayerID(this, 'hover')).remove();
          $('#' + $.LayerButton.getLayerID(this, 'selected')).remove();
        }
      );
      $('#panel6 *').remove();*/
    });
  });
}

//Bugfix #18572: function needed, to make a smooth transition if the 'speicherplatz gewinnen' link
//is pressed on the all functions tab. The existing initTab function does not work 100% correct for this case.
function switchToTab3()
{
  $('#tab-6Fader').css("z-index", "11");
  $('#tab-6Fader').animate({opacity:1}, 200, function() {
    //hide cover for TabMenu
    $('#tab6active').css("display", "inline");
    $('#lasttabcontainer').css("display", "none");
    $('#lasttabcontainer').css("z-index", "0");
    $('#tab-6Cover').css("visibility", "hidden");
    $('body').css("background-image", "url(images/ig-background.png)");
    $('#panel6').css("visibility", "hidden");
    $('#panel').css('top', '94px').css('visibility', 'visible');
    $('#panel, #rescuebutton').show();
    $('#tuningarea').css('top', '383px').css('visibility', 'visible');
      $('#tab-3').click();
    $('#tab-6Fader').animate({opacity:0}, 150, function() {
      $('#tab-6Fader').css("z-index", "-1");
      $('#tab-6Cover').css("z-index", "-1");
      showPanelForTab('#tab-3', true);
    });
  });
}


function initTab(tabElement, initTab6)
{
  // if tab6 is visible
  if ($('#lasttabinactive').is(':visible'))
  {
    // press hide button
    $('#lasttabinactive').click();
  }
  $('#'+ tabElement ).click();
  if (initTab6)
  {
    call('#tab:tab-6');
    panel6Load();
    $('#tab-6Cover').css("z-index", "5");
    $('#lasttab').css("z-index", "-1");
    $('#tab-6Cover').css("visibility", "visible");
    $('#tab-6Cover').width(765 - $('#tab-6').width());
    $('#tab6active').css("display", "none");
    $('#lasttabcontainer').css("display", "inline");
    $('#lasttabcontainer').css("z-index", "10");
    $('#rescuebutton').hide();
    $('#panel').css('top', '1094px').css('visibility', 'hidden');
    $('#tuningarea').css('top', '1000px').css('visibility', 'hidden'); // hide does not work as expected for activating turbo mode while hidden
    $('#panel .panel .lb-button').each(
      function ()
      {
        $('#' + $.LayerButton.getLayerID(this, 'normal', this.id)).hide();
      }
    );
    $('#panel6').css("visibility", "visible");
    //swap body background
    $('body').css("background-image", "url(images/panel6/ig-background.png)");
  }
}

function showPanelForTab(tabElement, fromTab6)
{
  $('#panel .panel').css('margin-top', '1000px').css('visibility', 'hidden');
  $('#panel .panel .lb-button').each(
    function ()
    {
      $('#' + $.LayerButton.getLayerID(this, 'normal', this.id)).hide();
    }
  );
  var id = $(tabElement).attr('id').substr($(tabElement).attr('id').length - 1, 1);
  $('#panel' + id).css('margin-top', '0').css('visibility', 'visible');

  if (!debug)
  {
    if ($(tabElement).attr('id') == 'tab-3')
    {
      if (!$('#lasttabinactive').is(':visible'))
      {
        var elementPos = $('#gaindiskspace').offset();
        call('#tab:tab-3:' + elementPos.left + ':' + elementPos.top);
      }
    }
    else
    {
      call('#tab:' + $(tabElement).attr('id'));
    }
  }
  $('#panel' + id + ' .lb-button').each(
    function ()
    {
      if (this.id.substr(0, 5) != 'dummy')
      {
        var button = $('#' + $.LayerButton.getLayerID(this, 'normal', this.id));
        var top = button.css('top');
        top = top.substr(0, top.length - 2);
        if (top > 1000)
        {
          button.css('top', (top - 1000) + 'px');
        }
        button.show();
      }
    }
  );
  if (fromTab6)
  {
    // update layerbuttons
    $('#panel1 .lb-button').each(
      function ()
      {
        $.LayerButton.updateLayerDimensions(this, 'normal', this.id);
      }
    );
  }
}
