$(function() {

   // clock
   var updateClock = function() {
      var days = [];
      for (var i = 0; i < 7; i++) {
         days[i] = ml('clock_day_'+i);
      }

      var months = [];
      for (var i = 0; i < 12; i++) {
         months[i] = ml('clock_month_'+i);
      }

      var now = new Date();

      // leading zeros
      var day = now.getDate();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      if (day < 10) day = '0'+day;
      if (hours < 10) hours = '0'+hours;
      if (minutes < 10) minutes = '0'+minutes;
      
      var datestring = days[now.getDay()]+', '+day+'. '
                       +months[now.getMonth()]+' '+now.getFullYear()+' | '
                       +hours+':'+minutes+ml('clock_time_appendix');

      $(".main > .header > .clockbar").html(datestring);
   };
   updateClock();
   // update every 30 seconds to prevent becoming async
   window.setInterval(updateClock, 30000);

   // letterlist
   $(".main > .header > .letter a:not(:last)").css('border-right', 'none');

   $("input[name=indexed_query]").defaultValuedInput(ml('indexed_search_default_value'));
   $("input[name=film_query]").defaultValuedInput(ml('film_search_default_value'));
   $("input[name=film_year_from]").defaultValuedInput(ml('film_search_year_from'));
   $("input[name=film_year_to]").defaultValuedInput(ml('film_search_year_to'));

   $(".filmSearchSubmitButton").click(function() {
      var query = $("input[name=film_query]").val();
      if (query == ml('film_search_default_value')) {
         query = '';
      }
      var from = $("input[name=film_year_from]").val();
      var to = $("input[name=film_year_to]").val();
      if (from == ml('film_search_year_from')) {
         from = '';
      } else if (to == ml('film_search_year_to')) {
         to = from;
      }
      if (to == ml('film_search_year_to')) {
         to = '';
      }
      var category = $("select[name=film_category]").val();
      var subject = $("select[name=film_genre]").val();
      
      document.location.href = 'index.php?page=index'
                               +'&language='+ml_getCurrentLanguage()
                               +'&film_query='+query
                               +'&film_year_from='+from
                               +'&film_year_to='+to
                               +'&film_category='+category
                               +'&film_genre='+subject;

      return false;
   });
   
   $("input[name=film_query], input[name=film_year_from], input[name=film_year_to]").keypress(function(e) {
      if (e.which == 13) { // enter
         $(".filmSearchSubmitButton").click();
      }
   });

   $("input[name=indexed_query]").keypress(function(e) {
      if (e.which == 13) { // enter
         var query = $("input[name=indexed_query]").val();
         if (query == ml('indexed_search_default_value')) {
            query = '';
         }

         document.location.href = 'index.php?page=search&indexed_query='+query;
      }
   });

   // footer links
   $(".footer .links a").click(function() {
      window.open(this.href);
      return false;
   });

});

$(window).load(function() {
   /*
    * style fix
    */
   if ($(".sidebar-wrap").height() > $(".content").height()) {
      $(".content").height($(".sidebar-wrap").height());
   }

   /*
    * slideshow
    */
   $(".filmDetail .slideshow .leftButton, .filmDetail .slideshow .rightButton").hover(function() {
      $(this).stop().animate({opacity: 0.8}, 200);
   }, function() {
      $(this).stop().animate({opacity: 0}, 500);
   }).animate({opacity: 0.8}, 2000, function() {
      $(this).animate({opacity: 0}, 2000);
   })
   $(".filmDetail .slideshow .slider *:last").css('margin-right', '0px');
   $(".filmDetail .slideshow").filmPicSlideshow();
});

$.fn.filmPicSlideshow = function() {
   $(this).each(function() {

      var options = {
         acceleration:    0.5, // how fast the slider gains speed (more means faster)
         friction:        0.5, // how fast the slider looses speed (more means faster)
         pixelsPerSecond: 500
      };

      // movement
      var animationInterval = null;
      var currentVelocity = 0;
      var sliderWrap = $(this).find('.slider-wrap');
      options.maximumVelocity = options.pixelsPerSecond / 60;

      // prepare
      var sliderWidth = 0;
      $(this).find('.slider').children().each(function() {
         sliderWidth += $(this).outerWidth(true);
      })
      $(this).find('.slider').width(sliderWidth);
      
      if (sliderWidth <= sliderWrap) {
         $(this).find('.leftButton, .rightButton').remove();
      }
         
      var move = function(direction) {
         if (animationInterval !== null) {
            window.clearInterval(animationInterval);
         }
         
         animationInterval = window.setInterval(function() {
            if (direction < 0) { // left
               currentVelocity -= options.acceleration;
               if (currentVelocity < -options.maximumVelocity) {
                  currentVelocity = -options.maximumVelocity;
               }
            } else if (direction > 0) { // right
               currentVelocity += options.acceleration;
               if (currentVelocity > options.maximumVelocity) {
                  currentVelocity = options.maximumVelocity;
               }
            } else if (currentVelocity < 0) { // stop
               currentVelocity += options.friction;
               if (currentVelocity > 0) {
                  currentVelocity = 0;
               }
            } else if (currentVelocity > 0) { // stop
               currentVelocity -= options.friction;
               if (currentVelocity < 0) {
                  currentVelocity = 0;
               }
            } else {
               window.clearInterval(animationInterval);
            }

            // everything calculcated? okay, lets get ready to rumble.
            sliderWrap[0].scrollLeft += parseInt(currentVelocity);
         }, 16);
      };

      // bindings
      $(this).find('.leftButton').mousedown(function() {
         move(-1);
         return false;
      });
      $(this).find('.rightButton').mousedown(function() {
         move(1);
         return false;
      });
      $(this).find('.leftButton, .rightButton').mouseup(function() {
         move(0);
         return false;
      }).mouseleave(function() {
         $(this).mouseup();
         return false;
      });

   });
};

/*
 * DO NOT TOUCH until you know _exactly_ what you are doing!
 */
function coverflow(data) {
   // do the coverflow for whitelisted browsers
   var version = parseFloat($.browser.version);
   if (($.browser.webkit && version > 500.0) || ($.browser.opera && version >= 10.0) || ($.browser.mozilla && version >= 1.9)) {

      // import fluidcanvas namespace into local scope
      eval(base2.FluidCanvas.namespace);

      var DrawableCover = Drawable.extend({
         coverImage: null,

         backgroundImage: null,

         options: null,

         constructor: function(options) {
            this.options = Utils.Object.merge({
               coverImage:       null,
               backgroundImage:  null,
               directorName:     null,
               filmName:         null,
               target:           null,
               extra:            null
            }, options || {});

            if (this.options.coverImage) {
               this.coverImage = new DrawableImage(this.options.coverImage);
            }
            if (this.options.backgroundImage) {
               this.backgroundImage = new DrawableImage(this.options.backgroundImage);
            }
         },

         draw: function(canvas) {
            canvas.ctx.save();

            // draw it centered at x and bottom aligned y
            canvas.ctx.translate(-(this.backgroundImage.imageObject.width / 2), -(this.backgroundImage.imageObject.height / 1.3));

            canvas.draw(this.backgroundImage, 0, 0);
            canvas.draw(this.coverImage, 0, 93);

            if (this.indicate) {
               canvas.ctx.fillStyle = '#000000';
               canvas.ctx.fillRect(0, 0, 100, 100);
               this.indicate = null;
            }

            canvas.ctx.restore();
         }
      });

      var Coverflow = base2.Base.extend({
         options: null,

         canvas: null,

         state: {
            mouseDownPosition: null,

            mousePosition: {
               x: null,
               y: null
            },

            scrollPosition: 0,

            mouseDownScrollPosition: 0,

            scrollVelocity: 0
         },

         pollActiveCoverCallback: null,

         constructor: function(options) {
            // merge optins
            this.options = Utils.Object.merge({
               coverAngle:             25,
               movementCircleRadius:   500,
               startAngle:             0,
               scrollFactor:           0.1,
               autoScroll:             true,
               maxAutoScrollVelocity:  0.01,
               autoScrollVelocityGain: 0.0001,
               width:                  840,
               height:                 330,
               backgroundStyle:        '#E5E5E5',
               parent:                 $('body').get(0),
               bufferCoverCount:       3,
               covers:                 []
            }, options || {});

            // create canvas
            this.canvas = new Canvas({
               width:           this.options.width,
               height:          this.options.height,
               backgroundStyle: this.options.backgroundStyle,
               parent:          this.options.parent
            });

            // bindings
            var self = this; // alias for this

            var mouseMoveTimeout;

            var setMouseActive = function() {
               self.state.scrollVelocity = 0;
               self.state.mouseDownPosition = Utils.Object.merge({}, self.state.mousePosition);
               self.state.mouseDownScrollPosition = self.state.scrollPosition;
               $(this).css('cursor', 'move');

               return false;
            };

            var canvasPosition = {
               x: $(this.canvas.canvasElement).offset().left,
               y: $(this.canvas.canvasElement).offset().top
            };

            var tooltip;
            var tooltipBackground;
            var removeTooltip = true;

            var setMousePosition = function(e) {
               if (tooltip && removeTooltip) {
                  removeTooltip = false;
                  tooltipBackground.fadeOut(250, function() {
                     tooltipBackground.remove();
                     tooltipBackground = null;
                  });
                  tooltip.fadeOut(250, function() {
                     tooltip.remove();
                     tooltip = null;
                     removeTooltip = true;
                  });
               }

               if (mouseMoveTimeout) {
                  window.clearTimeout(mouseMoveTimeout);
               }
               mouseMoveTimeout = window.setTimeout(function() {
                  self.pollActiveCoverCallback = function(activeCover) {
                     var info = '<div class="coverflow-tooltip-title">'+activeCover.options.filmName+'</div>'
                        +'<div class="coverflow-tooltip-director">'+activeCover.options.directorName+'</div>';
                     if (activeCover.options.extra) {
                        info += '<div class="coverflow-tooltip-extra">'+activeCover.options.extra+'</div>';
                     }
                     tooltip = jQuery('<div class="coverflow-tooltip"></div>').html(info).css({
                        top:  self.state.mousePosition.y+'px',
                        left: self.state.mousePosition.x+'px'
                     }).hide().appendTo('.mainSlideshow').fadeIn(250);
                     tooltipBackground = jQuery('<div class="coverflow-tooltip-background"></div>').css({
                        top:     self.state.mousePosition.y+'px',
                        left:    self.state.mousePosition.x+'px',
                        width:   tooltip.outerWidth(),
                        height:  tooltip.outerHeight(),
                        opacity: 0.85
                     }).hide().appendTo('.mainSlideshow').fadeIn(250);
                  };
               }, 500);

               self.state.mousePosition.x = e.pageX - canvasPosition.x;
               self.state.mousePosition.y = e.pageY - canvasPosition.y;

               if (self.state.mouseDownPosition) {
                  self.state.scrollPosition = self.state.mouseDownScrollPosition + (self.state.mousePosition.x - self.state.mouseDownPosition.x) * self.options.scrollFactor;
               }

               return false;
            };

            var setMouseInactive = function() {
               if (self.state.mouseDownPosition && self.state.mouseDownPosition.x == self.state.mousePosition.x && self.state.mouseDownPosition.y == self.state.mousePosition.y) {
                  self.pollActiveCoverCallback = function(activeCover) {
                     document.location.href = activeCover.options.target;
                  };
               }
               
               self.state.mouseDownPosition = null;
               $(this).css('cursor', 'default');

               return false;
            };

            $(this.canvas.canvasElement).mousedown(setMouseActive).mousemove(setMousePosition).mouseup(setMouseInactive).mouseleave(function() {
               if (mouseMoveTimeout) {
                  window.clearTimeout(mouseMoveTimeout);
               }

               self.state.mousePosition.x = self.state.mousePosition.y = 0;
               
               setMouseInactive();
               $(this).css('cursor', 'default');

               return false;
            });
         },

         run: function() {
            this.state.scrollPosition = this.options.startAngle;
            this.state.scrollVelocity = this.options.maxAutoScrollVelocity;

            // alias for this
            var self = this;

            // draw loop
            Utils.Timing.loop(function() {
               self.canvas.clear();

               var scrollAngleBase = self.state.scrollPosition;
               var indexPos = Math.round(-scrollAngleBase / self.options.coverAngle);

               // apply velocity if there is no dragging
               if (!self.state.mouseDownPosition) {
                  if (self.options.maxAutoScrollVelocity > 0) {
                     self.state.scrollVelocity += self.options.autoScrollVelocityGain;
                     if (self.state.scrollVelocity > self.options.maxAutoScrollVelocity) {
                        self.state.scrollVelocity = self.options.maxAutoScrollVelocity;
                     }
                  } else if (self.options.maxAutoScrollVelocity < 0) {
                     self.state.scrollVelocity -= self.options.autoScrollVelocityGain;
                     if (self.state.scrollVelocity < self.options.maxAutoScrollVelocity) {
                        self.state.scrollVelocity = self.options.maxAutoScrollVelocity;
                     }
                  }

                  self.state.scrollPosition += self.state.scrollVelocity;
               }

               // holds all the cover information that are calculated
               var covers = [];

               // determine all cover properties
               for (var i = indexPos - self.options.bufferCoverCount; i <= indexPos + self.options.bufferCoverCount; i++) {
                  var scrollAngleInRadians = Utils.Math.degToRad(scrollAngleBase + i * self.options.coverAngle);

                  covers.push({
                     scale:       Math.cos(scrollAngleInRadians) / 2 + 0.5,
                     coverObject: self.getCoverAt(i),
                     position:    {
                        x: Math.sin(scrollAngleInRadians) * self.options.movementCircleRadius + self.options.width / 2,
                        y: 260
                     }
                  });
               }

               // sort covers front to back
               covers.sort(function(a, b) {
                  return b.scale - a.scale;
               });

               if (self.pollActiveCoverCallback) {
                  // determine mouse location
                  for (var index in covers) {
                     var cover = covers[index];
                     var boundaryBox = {
                        x: cover.position.x - 96 * cover.scale,
                        y: cover.position.y - 240 * cover.scale - 5,
                        w: 192 * cover.scale,
                        h: 295 * cover.scale
                     };

                     if (self.state.mousePosition.x > 0 && self.state.mousePosition.y > 0 && self.state.mousePosition.x > boundaryBox.x && self.state.mousePosition.x < boundaryBox.x + boundaryBox.w && self.state.mousePosition.y > boundaryBox.y && self.state.mousePosition.y < boundaryBox.y + boundaryBox.h) {
                        self.pollActiveCoverCallback.call(this, cover.coverObject);
                        break;
                     }
                  }
                  
                  self.pollActiveCoverCallback = null;
               }

               // draw covers from back to front
               covers = covers.reverse();
               for (var index in covers) {
                  var cover = covers[index];
                  self.canvas.ctx.save();
                  self.canvas.ctx.translate(cover.position.x, cover.position.y);
                  self.canvas.ctx.scale(cover.scale, cover.scale);
                  self.canvas.draw(cover.coverObject);
                  self.canvas.ctx.restore();
               }
            }, 33);
         },

         getCoverAt: function(index) {
            // wrap beginning and end
            var index = index % covers.length;

            // there are no negative indices
            if (index < 0) {
               index += covers.length;
            }

            return covers[index];
         }
      });

      /* ======================================================================= */

      // create covers from film data
      var covers = [];
      $.each(data, function(index, film) {
         covers.push(new DrawableCover({
            directorName:    film.director,
            filmName:        film.title,
            coverImage:      film.cover,
            backgroundImage: 'media/png/cover_background.png',
            target:          film.target,
            extra:           film.extra
         }));
      });

      // remove placeholder
      $('.mainSlideshow img').remove();

      // create coverflow
      var coverflow = new Coverflow({
         parent:                $('.mainSlideshow').get(0),
         covers:                covers,
         maxAutoScrollVelocity: -0.06
      });

      // let's get ready to rumble!
      coverflow.run();

   }
}