function initMenu(ids, url) {
	$.getJSON(url, function(data) {
		//console.log(data);
		$.each(data, function(key, val) {
			var container = $('#' + ids[key]).append(val);
			$('li.lvl2 a', container).mouseover( function() {
				$(this).siblings('.preview-page-container').show();
			});
			$('li.lvl2 a', container).mouseout( function() {
				$(this).siblings('.preview-page-container').hide();
			});
			$('li.lvl1 a', container).mouseover( function() {
				$(this).siblings('.preview-page-container').show();
			});
			$('li.lvl1 a', container).mouseout( function() {
				$(this).siblings('.preview-page-container').hide();
			});			
		});
	});
}

function DetailCarousel(){}
DetailCarousel.prototype = {
  carouselHeight: 0,
  thumbsHeight: 0,
  
  animateUp: false,
  animateDown: false,
  
  animateSize: 23,
  animateSpeed: 200,
  
  init: function() {
    this.setupActions();
    this.scrollActive();
  },
  
  scrollActive: function() {
    if ($('#detail-carousel img.active').length) {
      var imageTop = parseInt($('#detail-carousel img.active').position().top);
      var imageHeight = parseInt($('#detail-carousel img.active').height());
      var imageTopShould = (this.carouselHeight - imageHeight) / 2;
      var offset = imageTopShould - imageTop;
      
      // offset can't be higher than 0, because this causes whitespace
      if (parseInt(offset) > 0) {
        offset = 0;
      }
      
      // offset can't me smaller than (carouselheight - total thumbs height)
      if (parseInt(offset) < (this.carouselHeight - this.thumbsHeight)){
        offset = this.carouselHeight - this.thumbsHeight;
      }
      
      // set the offset for the navigation-inner
      $('#detail-carousel .navigation-inner').css('top', parseInt(offset));
    }
  },
  
  setupActions: function() {
    this.carouselHeight = parseInt($('#detail-carousel').height());
    this.thumbsHeight = parseInt($('#detail-carousel .navigation-inner').height()) - 1;
    
    if (this.thumbsHeight < this.carouselHeight) {
      $('#detail-carousel .navigation-up').hide();
      $('#detail-carousel .navigation-down').hide();
    }
    
    var that = this;
    
    $('#detail-carousel .navigation-down').mouseover( function() {
      that.animateDown = false;
      that.animateUp = true;
      that.scrollUp()
    });
    
    $('#detail-carousel .navigation-down').mouseout( function() {
      that.animateUp = false;
    });
	
	$('#detail-carousel .navigation-down').click(function(e) {
		e.preventDefault();
	});
    
    $('#detail-carousel .navigation-up').mouseover( function() {
      that.animateUp = false;
      that.animateDown = true;
      that.scrollDown();
    });
    
    $('#detail-carousel .navigation-up').mouseout( function() {
      that.animateDown = false;
    });
	
	$('#detail-carousel .navigation-up').click(function(e) {
		e.preventDefault();
	});	
  },
  
  scrollDown: function() {
    var offset = parseInt($('#detail-carousel .navigation-inner').css('top'));
    
    var down = this.animateSize;
    
    if (offset + down > 0) {
      down = 0 - offset;
    }
    
    if (this.animateDown) {
      
      var that = this;
      $('#detail-carousel .navigation-inner').animate({top: '+='+down+'px'}, this.animateSpeed, 'linear', function() {
        that.scrollDown()
      });
    }
  },
  
  scrollUp: function() {
    var offset = parseInt($('#detail-carousel .navigation-inner').css('top'));
    
    var up = this.animateSize;
    
    if (offset - up < (this.carouselHeight - this.thumbsHeight)) {
      up = offset - (this.carouselHeight - this.thumbsHeight);
    }
  
    var offset = parseInt($('#detail-carousel .navigation-inner').css('top'));
    if (this.animateUp) {
      var that = this;
      $('#detail-carousel .navigation-inner').animate({top: '-='+up+'px'}, this.animateSpeed, 'linear', function() {
        that.scrollUp()
      });
    }
  }
}


function initCycle() {
	var cycle = $('.carousel-images');
	cycle.cycle({
		allowPagerClickBubble: true,
		fx: 'fade',
		pager: '#carousel-nav',
		pagerEvent: 'mouseover',
		pauseOnPagerHover: true,
		timeout: 4500,
		speed: 2000,
		width: 960,
		height: 600,
		before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			$('.carousel-nav .carousel-link').removeClass('active');
		},
		after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
			var index = $(nextSlideElement).index()
			$('.carousel-nav .carousel-link:eq('+index+')').addClass('active');
		},
		pagerAnchorBuilder: function(index, element) {
			return $('.carousel-link').get(index);
		}
	});
}