// Krok 1
// $(document).ready(function() {
//   $('#switcher-large').bind('click', function() {
//     $('body').addClass('large');
//   });
// });

// Krok 2
// $(document).ready(function() {
//   $('#switcher-default').bind('click', function() {
//     $('body').removeClass('narrow');
//     $('body').removeClass('large');
//   });
//   $('#switcher-narrow').bind('click', function() {
//     $('body').addClass('narrow');
//     $('body').removeClass('large');
//   });
//   $('#switcher-large').bind('click', function() {
//     $('body').removeClass('narrow');
//     $('body').addClass('large');
//   });
// });

// Krok 3
// $(document).ready(function() {
//   $('#switcher-default').bind('click', function() {
//     $('body').removeClass('narrow');
//     $('body').removeClass('large');
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
//   $('#switcher-narrow').bind('click', function() {
//     $('body').addClass('narrow');
//     $('body').removeClass('large');
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
//   $('#switcher-large').bind('click', function() {
//     $('body').removeClass('narrow');
//     $('body').addClass('large');
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// });

// Krok 4
// $(document).ready(function() {
//   $('#switcher-default').bind('click', function() {
//     $('body').removeClass('narrow').removeClass('large');
//   });
//   $('#switcher-narrow').bind('click', function() {
//     $('body').addClass('narrow').removeClass('large');
//   });
//   $('#switcher-large').bind('click', function() {
//     $('body').removeClass('narrow').addClass('large');
//   });
// 
//   $('#switcher .button').bind('click', function() {
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// });

// Krok 5
// $(document).ready(function() {
//   $('#switcher-default').bind('click', function() {
//     $('body').removeClass();
//   });
//   $('#switcher-narrow').bind('click', function() {
//     $('body').removeClass().addClass('narrow');
//   });
//   $('#switcher-large').bind('click', function() {
//     $('body').removeClass().addClass('large');
//   });
// 
//   $('#switcher .button').bind('click', function() {
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// });

// Krok 6
// $(document).ready(function() {
//   $('#switcher .button').bind('click', function() {
//     $('body').removeClass();
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// 
//   $('#switcher-narrow').bind('click', function() {
//     $('body').addClass('narrow');
//   });
//   $('#switcher-large').bind('click', function() {
//     $('body').addClass('large');
//   });
// });

// Krok 7
// $(document).ready(function() {
//   $('#switcher .button').bind('click', function() {
//     $('body').removeClass();
//     if (this.id == 'switcher-narrow') {
//       $('body').addClass('narrow');
//     }
//     else if (this.id == 'switcher-large') {
//       $('body').addClass('large');
//     }
//     
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// });

// Krok 8
// $(document).ready(function() {
//   $('#switcher .button').click(function() {
//     $('body').removeClass();
//     if (this.id == 'switcher-narrow') {
//       $('body').addClass('narrow');
//     }
//     else if (this.id == 'switcher-large') {
//       $('body').addClass('large');
//     }
//     
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//   });
// });

// Krok 9
// $(document).ready(function() {
//   $('#switcher h3').toggle(function() {
//     $('#switcher .button').addClass('hidden');
//   }, function() {
//     $('#switcher .button').removeClass('hidden');
//   });
// });

// Krok 10
// $(document).ready(function() {
//   $('#switcher h3').click(function() {
//     $('#switcher .button').toggleClass('hidden');
//   });
// });

// Krok 11
// $(document).ready(function() {
//   $('#switcher .button').hover(function() {
//     $(this).addClass('hover');
//   }, function() {
//     $(this).removeClass('hover');
//   });
// });

// Krok 12
// $(document).ready(function() {
//   $('#switcher').click(function() {
//     $('#switcher .button').toggleClass('hidden');
//   });
// });

// Krok 13
// $(document).ready(function() {
//   $('#switcher').click(function(event) {
//     if (event.target == this) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   });
// });

// Krok 14
// $(document).ready(function() {
//   $('#switcher').click(function() {
//     $('#switcher .button').toggleClass('hidden');
//   });
// });
// 
// $(document).ready(function() {
//   $('#switcher .button').click(function(event) {
//     $('body').removeClass();
//     if (this.id == 'switcher-narrow') {
//       $('body').addClass('narrow');
//     }
//     else if (this.id == 'switcher-large') {
//       $('body').addClass('large');
//     }
//     
//     $('#switcher .button').removeClass('selected');
//     $(this).addClass('selected');
//     event.stopPropagation();
//   });
// });

// Krok 15
// $(document).ready(function() {
//   $('#switcher').click(function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   });
// });
// 
// $(document).ready(function() {
//   $('#switcher').click(function(event) {
//     if ($(event.target).is('.button')) {
//       $('body').removeClass();
//       if (event.target.id == 'switcher-narrow') {
//         $('body').addClass('narrow');
//       }
//       else if (event.target.id == 'switcher-large') {
//         $('body').addClass('large');
//       }
//     
//       $('#switcher .button').removeClass('selected');
//       $(event.target).addClass('selected');
//     }
//   });
// });

// Krok 16
// $(document).ready(function() {
//   $('#switcher').click(function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   });
//   
//   $('#switcher-narrow, #switcher-large').click(function() {
//     $('#switcher').unbind('click');
//   });
// });

// Krok 17
// $(document).ready(function() {
//   $('#switcher').bind('click.collapse', function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   });
//   
//   $('#switcher-narrow, #switcher-large').click(function() {
//     $('#switcher').unbind('click.collapse');
//   });
// });

// Krok 18
// $(document).ready(function() {
//   var toggleStyleSwitcher = function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   };
//   
//   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
//   
//   $('#switcher-narrow, #switcher-large').click(function() {
//     $('#switcher').unbind('click.collapse');
//   });
// });

// Krok 19
// $(document).ready(function() {
//   var toggleStyleSwitcher = function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   };
//   
//   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
//   
//   $('#switcher-narrow, #switcher-large').click(function() {
//     $('#switcher').unbind('click.collapse');
//   });
//   $('#switcher-default').click(function() {
//     $('#switcher').bind('click.collapse', toggleStyleSwitcher);
//   });
// });

// Krok 20
// $(document).ready(function() {
//   var toggleStyleSwitcher = function(event) {
//     if (!$(event.target).is('.button')) {
//       $('#switcher .button').toggleClass('hidden');
//     }
//   };
//   
//   $('#switcher').click(toggleStyleSwitcher);
//   
//   $('#switcher-narrow, #switcher-large').click(function() {
//     $('#switcher').unbind('click', toggleStyleSwitcher);
//   });
//   $('#switcher-default').click(function() {
//     $('#switcher').click(toggleStyleSwitcher);
//   });
// });

// Krok 21
// $(document).ready(function() {
//   $('#switcher').trigger('click');
// });

// Krok 22
// $(document).ready(function() {
//   $('#switcher').click();
// });

// Krok 22
// $(document).ready(function() {
//   $(document).keyup(function(event) {
//     switch (String.fromCharCode(event.keyCode)) {
//       case 'N':
//         $('#switcher-default').click();
//         break;
//       case 'W':
//         $('#switcher-narrow').click();
//         break;
//       case 'D':
//         $('#switcher-large').click();
//         break;
//     }
//   });
// });

// Gotowy produkt

$(document).ready(function() {
  // Uaktywnienie efektu po najechaniu myszą na przyciski przełącznika stylów.
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });

  // Umożliwienie rozwijania i zwijania przełącznika stylów.
  var toggleStyleSwitcher = function(event) {
    if (!$(event.target).is('.button')) {
      $('#switcher .button').toggleClass('hidden');
    }
  };
  $('#switcher').click(toggleStyleSwitcher);

  // Symulacja kliknięcia, tak byśmy zaczęli w stanie zwinięcia.
  $('#switcher').click();
  
  // Funkcja setBodyClass() zmienia styl strony.
  // Uaktualnia także stan przełącznika stylów.
  var setBodyClass = function(className) {
    $('body').removeClass();
    $('body').addClass(className);
    $('#switcher .button').removeClass('selected');
    $('#switcher-' + className).addClass('selected');
    
    if (className == 'default') {
      $('#switcher').click(toggleStyleSwitcher);
    }
    else {
      $('#switcher').unbind('click', toggleStyleSwitcher);
      $('#switcher .button').removeClass('hidden');
    }
  };

  // Wywołanie funkcji setBodyClass() po kliknięciu przycisku.
  $('#switcher').click(function(event) {
    if ($(event.target).is('.button')) {
      if (event.target.id == 'switcher-default') {
        setBodyClass('default');
      }
      if (event.target.id == 'switcher-narrow') {
        setBodyClass('narrow');
      }
      else if (event.target.id == 'switcher-large') {
        setBodyClass('large');
      }
    }
  });

  // Wywołanie funkcji setBodyClass() po naciśnięciu klawisza.
  $(document).keyup(function(event) {
    switch (String.fromCharCode(event.keyCode)) {
      case 'N':
        setBodyClass('default');
        break;
      case 'W':
        setBodyClass('narrow');
        break;
      case 'D':
        setBodyClass('large');
        break;
    }
  });
});

