var timer, timer2;

var body;
var backgroundImages;

var days = [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ];
var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

var rows;
var marginTop;

var row_x_y   = 5000;
var slide_1_2 = 5000;
var slide_2_3 = 25000;
var slide_3_1 = 30000;
var reload    = 3600000;

/*
 * Starts any clocks using the user's local time
 * From: cssanimation.rocks/clocks
 */
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date(1714829835000);
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();

  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
      elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
      elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
      // If this is a minute hand, note the seconds position (to calculate minute position later)
      if (hands[j].hand === 'minutes') {
        elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
      }
    }
  }
}

/*
 * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
 */
function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}

/*
 * Do the first minute's rotation
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then continue with a 60 second interval
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}

/*
 * Move the second containers
 */
function moveSecondHands() {
  var containers = document.querySelectorAll('.seconds-container');
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 6;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 1000);
}

// build HTML table data from an array (one or two dimensional)
function renderTable1(data) {
  var html = '', rowCnt = 0;

  if(typeof(data[0]) === 'undefined') {
    return null;
  }

  if(data[0].constructor === Array) {
    var date = new Date(1714829835000);
    var day = date.getDate();
    if (day < 10) {
      day = '0' + day;
    }
    var month = date.getMonth()+1;
    if (month < 10) {
      month = '0' + month;
    }
    var dateStr = date.getFullYear() + '-' + month + '-' + day;
    var hours = date.getHours() * 100 + date.getMinutes();
    for(var row in data) {
      if (data[row][0] == dateStr && parseInt(data[row][1].replace(':', '')) >= hours) {
        rowCnt++;
        html += '<tr>\r\n';
        var i = 1;
        for(var item in data[row]) {
          if (item > 0 && item <= 3) {
            var cell = data[row][item];
            if (item == 1) {
              cell += ' Uhr';
            }
            if (item == 3) {
              var str = ''
              if (data[row][4] != undefined) {
                str = data[row][4];
              }
              cell = '<div>' + cell + '<br /><span>' + str + '</span>';
            }
            html += '<td class="col' + i + '">' + cell + '</td>\r\n';

            i++;
          }
        }
      }
      html += '</tr>\r\n';
    }

    if (0 === rowCnt) {
      html += '<tr>\r\n';
      html += '<td class="col-empty">' + data[0][0] + '</td>\r\n';
      html += '</tr>\r\n';
    }
  }

  return html;
}

function renderTable2(data) {
  var table = [[], [], []];
  var html = '';

  if(typeof(data[0]) === 'undefined') {
    return null;
  }

  if(data[0].constructor === Array) {
    var P1D = new Date(1714829835000);
    P1D.setDate(P1D.getDate()+1);
    var P2D = new Date(1714829835000);
    P2D.setDate(P2D.getDate()+2);
    var P3D = new Date(1714829835000);
    P3D.setDate(P3D.getDate()+3);
    var P1D_day = P1D.getDay();
    var P1D_month = P1D.getMonth()+1;
    var P2D_day = P2D.getDate();
    var P2D_month = P2D.getMonth()+1;
    var P3D_day = P3D.getDate();
    var P3D_month = P3D.getMonth()+1;

    html += '<thead><tr>';
    html += '<th class="col1">' + days[(P1D_day)%7] + '</th><th></th><th>' + days[(P1D_day+1)%7] + '</th><th></th><th>' + days[(P1D_day+2)%7] + '</th><th></th>';

    html += '</tr></thead>';

    P1D_day = P1D.getDate();

    if (P1D_day < 10) {
      P1D_day = '0' + P1D_day;
    }
    if (P1D_month < 10) {
      P1D_month = '0' + P1D_month;
    }
    if (P2D_day < 10) {
      P2D_day = '0' + P2D_day;
    }
    if (P2D_month < 10) {
      P2D_month = '0' + P2D_month;
    }
    if (P3D_day < 10) {
      P3D_day = '0' + P3D_day;
    }
    if (P3D_month < 10) {
      P3D_month = '0' + P3D_month;
    }
    var dateStrP1D = P1D.getFullYear() + '-' + P1D_month + '-' + P1D_day;
    var dateStrP2D = P2D.getFullYear() + '-' + P2D_month + '-' + P2D_day;
    var dateStrP3D = P3D.getFullYear() + '-' + P3D_month + '-' + P3D_day;
    for(var row in data) {
      switch (data[row][0]) {
        case dateStrP1D:
          table[0].push(data[row]);
          break;
        case dateStrP2D:
          table[1].push(data[row]);
          break;
        case dateStrP3D:
          table[2].push(data[row]);
          break;
      }
    }

    var cell1, cell2;
    var lines = Math.max(table[0].length, table[1].length, table[2].length);

    for(var i = 0; i < lines; i++) {
      html += '<tr>\r\n';

      for(var j = 0; j < 3; j++) {
        cell1 = '';
        cell2 = '';
        if (Array.isArray(table[j][i])) {
          cell1 = table[j][i][1];
          cell2 = table[j][i][2];
        }
        if (0 === i && 0 === j && '' === cell1 && '' !== cell2) {
          html += '<td colspan="2" class="col2" style="width: 574px; padding-left: 181px;">' + cell2 + '</td>\r\n'
        } else {
          html += '<td class="col' + (2*j+1) + '">' + cell1 + '</td>\r\n';
          html += '<td class="col' + (2*j+2) + '">&nbsp;&nbsp;' + cell2 + '</td>\r\n';
        }
      }

      html += '</tr>\r\n';
    }
  }

  return html;
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function loadPage2() {
  body.removeClass('page-1');
  body.addClass('page-2');

  $('.clock, .headline2, #table1').fadeIn();

  rows = $('#table1 tr').length;

  if (rows > 4) {
    marginTop = 0;
    $('#table1').css('margin-top', '0');
    $('#table1 tr').each(function() {
      $(this).attr('style', '');
    });
    scrollRow(rows-4);
  } else {
    clearTimeout(timer);
    timer = setTimeout(function() {
      $('#table1').fadeOut(function() {
        loadPage3();
      });
    }, slide_2_3);
  }
}

function scrollRow(remainder) {
  if (remainder === 0) {
    clearTimeout(timer);
    timer = setTimeout(function() {
      $('#table1').fadeOut(function() {
        loadPage3();
      });
    }, row_x_y);
  } else {
    clearTimeout(timer);
    timer = setTimeout(function() {
      var rowToHide = $('#table1 tr:nth-child(' + (rows-4-remainder+1) + ')');
      marginTop -= rowToHide[0].clientHeight;

      rowToHide.animate({ opacity: 0 }, 300, 'swing', function() {
        $('#table1 tr:nth-child(' + (rows-remainder) + ')').css('background-image', "url('css/img/divider_h.png')");
        $('#table1').animate({ marginTop: marginTop + 'px' }, 300);
        $('#table1 tr:nth-child(' + (rows-remainder+1) + ')').animate({ opacity: 1 }, 300, 'swing', function() {
          scrollRow(remainder-1);
        });
      });
    }, row_x_y);
  }
}

function loadPage3() {
  body.removeClass('page-2');
  body.addClass('page-3');

  $('#table2').fadeIn();

  clearTimeout(timer);
  timer = setTimeout(function() {
    $('.clock').fadeOut();
    $('.headline2').fadeOut();
    $('#table2').fadeOut(function () {
      setBackgroundImage();
      loadPage1();
      //checkAuth();
    });
  }, slide_3_1);
}

function loadPage1() {
  body.removeClass('page-3');
  body.addClass('page-1');

  $('.clock, .headline1, .divider, .headline2').fadeIn();

  clearTimeout(timer);
  timer = setTimeout(function() {
    $('.clock').fadeOut();
    $('.headline1').fadeOut();
    $('.divider').fadeOut();
    $('.headline2').fadeOut(function() {
      loadPage2();
    })
  }, slide_1_2);
}

function setBackgroundImage() {
  var img = getRandomInt(0, 2);

  backgroundImages.each(function(index) {
    if (img == index) {
      $(this).css('display', 'block');
    } else {
      $(this).css('display', 'none');
    }
  });
}

function blur(img) {
  var vague = img.Vague({
    intensity: 12,
    forceSVGUrl: false
  });

  vague.blur();
}

$(document).ready(function() {
  body = $('body');
  backgroundImages = $('.background-image');

  backgroundImages.each(function() {
    blur($(this));
  });

  initLocalClocks();
  moveSecondHands();
  setUpMinuteHands();

  var date = new Date(1714829835000);

  $('.headline2').html('<strong>' + days[date.getDay()] + ',</strong><br />' + date.getDate() + '. ' + months[date.getMonth()] + ' ' + date.getFullYear());

  timer = setTimeout(function() {
    $('.headline1').fadeOut();
    $('.divider').fadeOut();
    $('.headline2').fadeOut();
    $('.clock').fadeOut(function() {
      loadPage2();
    });
  }, slide_1_2);

  clearTimeout(timer2);
  timer2 = setTimeout(function() {
    window.location.reload(true);
  }, reload);
});

/**
 * Load Sheets API client library.
 */


function loadSheetsApi() {
  gapi.client.setApiKey('AIzaSyB_j-aktnjxRlwKiRWqdxF0RFP2WX-5Y54');
  var discoveryUrl =
    'https://sheets.googleapis.com/$discovery/rest?version=v4';
  gapi.client.load(discoveryUrl).then(listDay);
}

// Client ID and API key from the Developer Console
var CLIENT_ID = '42336215592-eu7ikup7uqd0pckr8hno18s3buoqclmi.apps.googleusercontent.com';
var API_KEY = 'AIzaSyB_j-aktnjxRlwKiRWqdxF0RFP2WX-5Y54';

// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];

// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";

var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');

/**
*  On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}

/**
*  Initializes the API client library and sets up sign-in state
*  listeners.
*/
function initClient() {
gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES
}).then(function () {
    // Listen for sign-in state changes.
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

    // Handle the initial sign-in state.
    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    authorizeButton.onclick = handleAuthClick;
    signoutButton.onclick = handleSignoutClick;
});
}

/**
*  Called when the signed in status changes, to update the UI
*  appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
    authorizeButton.style.display = 'none';
    signoutButton.style.display = 'block';
    listDay();
} else {
    authorizeButton.style.display = 'block';
    signoutButton.style.display = 'none';
}
}

/**
*  Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}

/**
*  Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}

function listDay() {
  gapi.client.sheets.spreadsheets.values.get({
    spreadsheetId: '14cUxkFvrniVVE9kfv7BU2tyGEIWliwwfE9vLEjPQLJ4',
    range: 'A1:E1000'
  }).then(function(response) {
    var html1 = renderTable1(response.result.values);
    var table1 = $('#table1');
    table1.empty();
    table1.html(html1);

    var html2 = renderTable2(response.result.values);
    var table2 = $('#table2');
    table2.empty();
    table2.html(html2);
  });
}

function listDay(data) {
    var response = [];
    for (var i = 0; i < data.values.length; i++) {

        var date = '';
        var time = '';
        var txt1 = '';
        var txt2 = '';

        if (data.values[i][0]) {
            date = data.values[i][0];
        }
        if (data.values[i][1]) {
            time = data.values[i][1];
        }
        if (data.values[i][2]) {
            txt1 = data.values[i][2];
        }
        if (data.values[i][3]) {
            txt2 = data.values[i][3];
        }

        response[i] = [
            date,
            time,
            txt1,
            txt2
        ];
    }

    var html1 = renderTable1(response);
    var table1 = $('#table1');
    table1.empty();
    table1.html(html1);

    var html2 = renderTable2(response);
    var table2 = $('#table2');
    table2.empty();
    table2.html(html2);
}

$(document).ready(
    $.ajax(
        {
            //url: 'https://spreadsheets.google.com/feeds/list/14cUxkFvrniVVE9kfv7BU2tyGEIWliwwfE9vLEjPQLJ4/od6/public/values?alt=json',
            url: 'https://sheets.googleapis.com/v4/spreadsheets/14cUxkFvrniVVE9kfv7BU2tyGEIWliwwfE9vLEjPQLJ4/values/Tabellenblatt1?alt=json&key=AIzaSyAay6cFjXk-f6htvBilwDtYFhjuGN5NNCc',
            success: listDay
        }
    )
);