// This file was created specifically for 69naughty.com layout


// **************** Defining global variables ****************

// Keeps categories scrolling
var moveCategoriesRun = false;

// Holds mouse position on screen
var pointerX, pointerY;

// categories_static, categories_dynamic
var statcat, dyncat;

// categories_static offset, categories_static height width
var statcat_cumulative, statcat_height, statcat_width;

// categories_dynamic height and width
var dyncat_height, dyncat_width;

// An array that holds all the video_groups
var video_groups;

// Holds the current video group
var current_video_group;
var video_group_step = 532;

// Observe onDOMReady (domready.js)
Event.onDOMReady(function() {
  // Assigning the global variables
	statcat = $('categories_static');
	dyncat = $('categories_dynamic');

  // Left arrow "onclick" event
	$('videos_previous').observe('click', function() {
		if (Effect.Queues.get('videos').size() == 0)
			scrollVideos(-1);
	}).hide();
	
  // Right arrow "onclick" event
	$('videos_next').observe('click', function() {
		if (Effect.Queues.get('videos').size() == 0)
			scrollVideos(1);
	});
  
  video_groups = $$('#videos_static .videos');
  current_video_group = 0;
  video_groups.each(function(e, i) {
    e.id = 'video_group_' + i;
    e.style.left = video_group_step + 'px';
    e.hide();
  });
  video_groups[current_video_group].style.left = '0px';
  video_groups[current_video_group].show();
});

// Observe window.load event
Event.observe(window, 'load', function() {
  // Fetching these values on window.load since load is after rendering and objects are in placed and sized
	statcat_height = statcat.getHeight(); statcat_width = statcat.getWidth();
	
	dyncat_height = dyncat.getHeight();
  dyncat_width = dyncat.getWidth();  
  
  // Monitoring the mouse move on the screen to know if it is within the categories bounderies
	document.observe('mousemove', function(event) {
    statcat_cumulative = statcat.cumulativeOffset();
		pointerX = event.pointerX();
		pointerY = event.pointerY();
		
		// If mouse is withing the static categories div bounderies
		if (pointerY > statcat_cumulative.top && pointerY < statcat_cumulative.top + statcat_height &&
			pointerX > statcat_cumulative.left && pointerX < statcat_cumulative.left + statcat_width) {
			
			if (!moveCategoriesRun) {
				moveCategoriesRun = true;
				moveCategories();
			}
		} else {
			moveCategoriesRun = false;
		}
	});
});

function scrollVideos(dir) {
  next_video_group = current_video_group + dir;
  
  if (next_video_group < 0 || next_video_group >= video_groups.length)
    return;
  
  video_groups[next_video_group].show();
  
  // This is the actual "movement" effect of the videos
  new Effect.Parallel([
    new Effect.Move(video_groups[current_video_group].id, { sync: true, x: -(dir * video_group_step), mode: 'absolute' }),
    new Effect.Move(video_groups[next_video_group].id, { sync: true, x: 0, mode: 'absolute' })
  ], { 
    duration: 1.2,
    queue: {
      scope: 'videos',
      limit: 1
    },
    afterFinish: function() {
      video_groups.each(function(e, i) {
        if (current_video_group != i) {
          e.hide();
        }
      });
    }
  });
  
  current_video_group = next_video_group;
  
  if (current_video_group >= video_groups.length - 1) // We're at the last video group
    $('videos_next').fade();
  else
    $('videos_next').appear();
    
  if (current_video_group == 0)
    $('videos_previous').fade();
  else
    $('videos_previous').appear();
}

// moveCategories is running when the mouse is in the regions of categories_static
function moveCategories() {
	if (moveCategoriesRun) {
		statBottom = statcat_cumulative.top + statcat_height;
		
		scrollRegion = 150;
		if (pointerY > statcat_cumulative.top && pointerY < statcat_cumulative.top + scrollRegion) {
      // Mouse pointer is in the upper region, scroll up
			stat_relative = 100 - (((pointerY - statcat_cumulative.top) * 100) / scrollRegion);
			scrollCategories((stat_relative * 8) / 100);
		} else if (pointerY < statBottom && pointerY > statBottom - scrollRegion) {
      // Mouse pointer is in the bottom region, scroll down
			stat_relative = 100 - (((statBottom - pointerY) * 100) / scrollRegion);
			scrollCategories(-((stat_relative * 7) / 100));
		}
		
		window.setTimeout('moveCategories()', 50);
	}
}

// scrollCategories - Moves categories_dynamic inside categories_static to create a scrolling effect
// It moves categories_dynamic using the value of amount
function scrollCategories(amount) {
	dyncat_position = dyncat.cumulativeOffset();
	move = 0;

	amount = amount * Math.abs(amount);
	
	if (amount > 0) {
		if (Math.abs(dyncat_position.top - statcat_cumulative.top) < amount)
			move = -(dyncat_position.top - statcat_cumulative.top)
		else if (dyncat_position.top < statcat_cumulative.top)
			move = amount;
	} else if (amount < 0) {
		dyncat_bottom = dyncat_position.top + dyncat_height;
		statcat_bottom = statcat_cumulative.top + statcat_height;
		
		if (dyncat_bottom - statcat_bottom < Math.abs(amount))
			move = -(dyncat_bottom - statcat_bottom)
		else if (dyncat_bottom > statcat_bottom)
			move = amount;
	}

	repos = dyncat_position.top - statcat_cumulative.top;
	dyncat.style.top = Math.round(repos + move) + 'px';
}