var ovzMode  = sessionStorage.getItem('ovz');
var ovzSize  = sessionStorage.getItem('size');
var ovzColor = sessionStorage.getItem('color');
var ovzBody  = document.getElementsByTagName('body');

if (ovzMode == 1) {
  if (ovzSize === null) ovzSize = 'normal';
  if (ovzColor === null) ovzColor = 'bw';

  ovzBody[0].className += " ovz";
  ovzBody[0].className += " ovz-size-" + ovzSize;
  ovzBody[0].className += " ovz-color-" + ovzColor;

  console.log("Enable OVZ mode with size " + ovzSize + " and color " + ovzColor);
}

document.addEventListener('DOMContentLoaded', function(){
  var ovzMenu = [
    '<div class="region">',
    '<div id="ovz-menu">',
    '<ul>',
    '<li class="title">Выбор шрифта</li>',
    '<li>',
    '<div data-ovz-size="normal">A</div>',
    '<div data-ovz-size="large">A</div>',
    '<div data-ovz-size="xlarge">A</div>',
    '</li>',
    '<li class="sep">|</li>',
    '<li>Выбор цвета</li>',
    '<li data-ovz-color="bw">T</li>',
    '<li data-ovz-color="wb">T</li>',
    '<li data-ovz-color="by">T</li>',
    '<li class="sep">|</li>',
    '<li data-ovz-cancel>Обычная версия</li>',
    '</ul>',
    '</div>',
    '</div>'
  ];

  jQuery('body').prepend(ovzMenu.join(''));

  jQuery('#ovz-toggle').click(function(){
    console.log('Enable OVZ mode');
    jQuery('body').addClass('ovz ovz-size-normal ovz-color-bw');
    jQuery('body').data('ovz-size', 'normal');
    jQuery('body').data('ovz-color', 'bw');
    jQuery( '[data-ovz-size=normal]' ).addClass('active');
    jQuery( '[data-ovz-color=bw]' ).addClass('active');

    sessionStorage.setItem('size', 'normal');
    sessionStorage.setItem('color', 'bw');
    sessionStorage.setItem('ovz', 1);
  });

  jQuery('[data-ovz-cancel]').click(function(){
    var oldOS = jQuery( 'body' ).data('ovz-size');
    var oldOC = jQuery( 'body' ).data('ovz-color');

    console.log('Disable OVZ mode');
    jQuery('body').removeClass('ovz');
    jQuery('body').removeClass('ovz-size-' + oldOS);
    jQuery('body').removeClass('ovz-color-' + oldOC);
    jQuery('[data-ovz-size]').removeClass('active');
    jQuery('[data-ovz-color]').removeClass('active');

    jQuery('body').data('ovz-size', '');
    jQuery('body').data('ovz-color', '');

    sessionStorage.setItem('size', '');
    sessionStorage.setItem('color', '');
    sessionStorage.setItem('ovz', 0);
  });

  jQuery('[data-ovz-size]').click(function(){
    var newOS = jQuery( this ).data('ovz-size');
    var oldOS = jQuery( 'body' ).data('ovz-size');
    console.log('Swich from ' + oldOS + ' to ' + newOS + ' size');
    jQuery('body').data('ovz-size', newOS);
    jQuery('body').removeClass('ovz-size-' + oldOS);
    jQuery('body').addClass('ovz-size-' + newOS);
    jQuery('[data-ovz-size]').removeClass('active');
    jQuery( this ).addClass('active');
    sessionStorage.setItem('size', newOS);
  });

  jQuery('[data-ovz-color]').click(function(){
    var newOC = jQuery( this ).data('ovz-color');
    var oldOC = jQuery( 'body' ).data('ovz-color');
    console.log('Swich from ' + oldOC + ' to ' + newOC + ' color');
    jQuery('body').data('ovz-color', newOC);
    jQuery('body').removeClass('ovz-color-' + oldOC);
    jQuery('body').addClass('ovz-color-' + newOC);
    jQuery('[data-ovz-color]').removeClass('active');
    jQuery( this ).addClass('active');
    sessionStorage.setItem('color', newOC);
  });
});