function onBefore() {
  //$('#main-slider-left').animate({opacity: "hide"}, "slow");
  $('#main-slider-left').hide();
  var imgTitle = $(this).find('div.title').html();
  var imgAlt = $(this).find('div.text').html();
  var imgLink = $(this).find('div.link').html();
  $('#main-slider-left').
    animate({opacity: "show"}, "slow").
      html('<h1>' + imgTitle + '</h1>').
      append('<p>' + imgAlt + '</p>');
}

function onAfter() {
}

function initSlider() {
  $('#main-slider').cycle({
    fx: 'turnRight',
    speed: 2500,
    timeout: 8000,
    delay: 200,
    pause: 1,
    pager: '#slider-nav',
    before: onBefore,
    after: onAfter
  });
}

function initRotator() {
  $('#rotator').cycle({
    fx: 'fade'
  });
}

function initZoomables() {
  $(".zoomable").click(function (el) {
    $("#zoomable-view").remove();
    var image = $(this).children("img").attr("src");
    
    var slide_code = "";
    slide_code += "<div id='zoomable-view' style='left: 0; top: 0; display: none; z-index: 1000; position: absolute;'>";
    slide_code += "<img src='" + image +"' />";
    slide_code += "</div>";
    $('body').parent().append(slide_code);
    
    var slide = $("#zoomable-view");
    var x = $(this).children("img").offset().left + ($(this).children("img").width() - slide.width()) / 2;
    var y = $(this).children("img").offset().top + ($(this).children("img").height() - slide.height()) / 2;
    slide.css('left', x);
    slide.css('top', y);
    slide.fadeIn();
    slide.click(function () {
      $(this).fadeOut('slow', function () {
        $(this).remove();
      });
    });
  });
}

$(function () {
  initSlider();
  initRotator();
  initZoomables();
});