var characters = $H({
  prev: $H({
    hiro: "shun",
    futo: "hiro",
    suzume: "futo",
    tora: "suzume",
    kunoichi: "tora",
    shun: "kunoichi"
  }),
  next: $H({
    hiro: "futo",
    futo: "suzume",
    suzume: "tora",
    tora: "kunoichi",
    kunoichi: "shun",
    shun: "hiro"
  })
});

document.observe("dom:loaded", function() {
	$('menu').setStyle('position: relative').insert(new Element('img', { 'src': 'data/logos/esrb_desc/everyone_crude.gif', 'width': 149, 'height': 79, 'style': 'position: absolute; z-index: 50; left: 5px', 'id': 'game_esrb_logo' }));
});

function after_ajax(page) {         
  if ($('minininjas_menu')) {
    set_up_menu('minininjas');
  }
	
	switch(page) {
    case 'home': 
    case null: 
    case '':
      set_up_menu('home');
      home_page_animation();
      break;
    case 'story':
      set_up_story_page();
      break;
    case 'characters':
      set_up_characters();
      break;
    case 'media':
      set_up_media();
      break;
    case 'reviews':
      set_up_reviews();
      break;
  }
}

function set_up_menu(menu_type) {
  ['story','characters','media','sysreqs','reviews'].each(function(page) {
    $(menu_type+'_menu_'+page).down('a').observe('click',function(event) {
      load_minisite_section("minininjas",page);
      Event.stop(event);
    });
  });
}

function home_page_animation() {
  //Set up the page before animation
  $('home_ninjas').hide();
  $('home_logo').hide();
  $('home_menu').hide();
  var shadow = $('home_shadow');
  shadow.setStyle({left: (0 - shadow.viewportOffset().left - 772)+"px", opacity: 0});
  
  //We want a slight delay first, so the whole animation section is wrapped in a function  
  animation = function() {
    animation_step_2 = function() {
      $('home_ninjas').appear({duration: 0.8});
      $('home_shadow').morph('left:-480px; opacity:1.0;',{duration: 0.8});
    };
    //Run the animation
    $('home_logo').appear({duration: 0.5, queue: 'first'}); // 1
    $('home_menu').appear({duration: 0.4, queue: 'end'}); // 2
    setTimeout(animation_step_2,900); // 3 
  }
  
  //Run the animation after a delay
  setTimeout(animation,500);
  
}

function set_up_story_page() {
  $('story_play_button').observe('click',function(event) {
    $('story_play_button').hide();
    play_story_movie();
  });
  
  $('story_play_button').setStyle({zIndex: -20});
  $('story_bird').hide();
  var screen = $('story_screen');
  screen.setStyle({top: (0 - screen.viewportOffset().top - 338)+"px"});

  //We want a slight delay first, so the whole animation section is wrapped in a function  
  animation = function() {
    $('story_screen').morph('top:-7px;',{duration: 2, queue: 'first', afterFinish: function(){
      $('story_play_button').setStyle({zIndex: 20});
    }});
    $('story_bird').appear({duration: 0.5, queue: 'end'});
  }
  
  //Run the animation after a delay
  setTimeout(animation,600);
  
}

function set_up_characters() {
  play_character_movie('hiro');
  $('characters_left_button').observe('click',character_change.bindAsEventListener(this,'prev'));
  $('characters_right_button').observe('click',character_change.bindAsEventListener(this,'next'));
  $('characters_evil_button').observe('click',show_evil_screen.bindAsEventListener(this));
  $('characters_board_enemies').observe('click',show_enemies.bindAsEventListener(this));
}

function set_up_media() {
  //Make the buttons work
  $$('.media_close_button, #media_fullscreen').invoke('observe','click',close_media_popup_window.bindAsEventListener(this));
  $('media_overlay').observe('click',close_media_popup_window.bindAsEventListener(this,true));
  
  $('media_screenshots_button',
    'media_desktops_button',
    'media_trailer_button',
    'media_demo_button').invoke('observe','click',open_media_popup_window.bindAsEventListener(this));

  $$('.media_screen_cell img').invoke('observe','click',show_screenshot.bindAsEventListener(this));  
  $$('.media_desk_cell img').invoke('observe','click',choose_desktop.bindAsEventListener(this));
  
  // Set up for animation
  $('media_bee').hide();
  $('media_fox').hide();
  var left_buttons_image = $('media_buttons_image_left');
  var right_buttons_image = $('media_buttons_image_right');
  $('media_screenshots_button').setStyle({zIndex: -20});
  $('media_desktops_button').setStyle({zIndex: -20});
  $('media_trailer_button').setStyle({zIndex: -20});
  $('media_demo_button').setStyle({zIndex: -20});
  
  left_buttons_image.setStyle({top: (0 - left_buttons_image.viewportOffset().top - 499)+"px"});
  right_buttons_image.setStyle({top: (0 - right_buttons_image.viewportOffset().top - 499)+"px"});
  
  //We want a slight delay first, so the whole animation section is wrapped in a function
  animation = function() {
    $('media_buttons_image_right').morph('top:-7px;',{duration: 2.5});
    $('media_buttons_image_left').morph('top:-7px;',{duration: 2.5, delay: 0.6, afterFinish: function(){
      $('media_screenshots_button').setStyle({zIndex: 20});
      $('media_desktops_button').setStyle({zIndex: 20});
      $('media_trailer_button').setStyle({zIndex: 20});
      $('media_demo_button').setStyle({zIndex: 20});
    }});
    $('media_bee').appear({duration: 0.5, delay: 3.5});
    $('media_fox').appear({duration: 0.5, delay: 3.5});
  }
  
  //Run the animation after a delay
  setTimeout(animation,300);

}

function set_up_reviews() {
   $('reviews_ninja','reviews_enemy').invoke('hide');
   var panel = $('reviews_panel');
   panel.setStyle({top: (0 - panel.viewportOffset().top - 503)+"px"});
   
   //animation time
   panel.morph('top:-7px;',{duration: 1.5, delay: 0.2, queue: 'first'});
   $('reviews_enemy').appear({duration: 0.5, delay: 0.3, queue: 'end'});
   $('reviews_ninja').appear({duration: 0.5, delay: 0.1, queue: 'end'});
}

function open_media_popup_window(event) {
  $('media_overlay').appear({duration: 0.4, from: 0.0, to: 0.7});
  var clicked_label_id = Event.element(event).identify();
  var window_to_show_id = clicked_label_id.substr(0,clicked_label_id.length - 7) + "_window";
  $(window_to_show_id).appear({duration: 0.4});
}

function close_media_popup_window(event) {
  //Find all the open windows
  var open_windows = $$('.media_popup_window').findAll(function(popup) { return popup.visible(); });
  
  //If the overlay was clicked...
  if ($A(arguments)[1]) {
    //Find all open windows + the overlay
    var windows_to_close = open_windows
    windows_to_close.push($('media_overlay'));
  } else {
    // Otherwise, work out which window the X button belonged to.
    var windows_to_close = new Array(Event.element(event).up());
    
    //If this is the only window open, close the overlay too.
    if (open_windows.size() < 2) {
      windows_to_close.push($('media_overlay'));
    };
  };
  
  // Close the windows
  windows_to_close.invoke('fade',{duration: 0.3});
}

function show_screenshot(event) {
  var clicked_thumbnail = Event.element(event);
  var required_image = clicked_thumbnail.readAttribute('src').split('/').last();
  $('media_fullscreen').writeAttribute({src: 'data/games/minininjas/images/media/screenshots/'+required_image});
  
  var caption = new Element('p').update(clicked_thumbnail.readAttribute('alt'));
  $('media_fullscreen_caption').update(caption);
  
  $('media_fullscreen_window').appear({duration: 0.4});
}

function choose_desktop(event) {
  var clicked_thumbnail = Event.element(event);
  var required_image = clicked_thumbnail.readAttribute('src');
  
  $('media_fulldesk_thumb').writeAttribute({src: required_image});
  
  var desktop_file_name = required_image.split('/').last();
  desktop_file_name = desktop_file_name.substr(0,desktop_file_name.length - 4);
  ['_1920','_1680','_1440','_1280'].each(function(res){
    $('media_desk'+res).writeAttribute({href: 'data/games/minininjas/images/media/desktops/' + desktop_file_name + res + '.jpg'});
  });

  $('media_fulldesk_window').appear({duration: 0.4});
}

function character_change() {
  $('characters_movie_frame').update("");
  
  //Forwards or backwards? Arguments sent from the clicked element using bindAsEventListener
  var direction = $A(arguments)[1];
  
  //Work out what the current character is
  var current_character = $('characters_text_box').childElements().find(function (el) {
    return el.visible();
  }).identify().split("_").last();
  
  //What's the next/previous character?
  var next_character = characters.get(direction).get(current_character);
  
  //Animation time!
  $('characters_text_box').childElements().invoke('fade',{duration: 0.1, queue: 'first'});
  $('characters_names').childElements().invoke('fade',{duration: 0.1, queue: 'end'});
  $('characters_names_'+next_character).appear({duration:0.2, queue: 'end'});
  $('characters_text_'+next_character).appear({duration:0.2, queue: 'end', afterFinish: function(){
    play_character_movie(next_character);
  }}); 
}

function show_enemies() {
  $('characters_board_enemies').stopObserving('click').addClassName('board_active');
  $('characters_board_ninjas').removeClassName('board_active');
  
  function fade_in_enemies(){
    $('characters_evil_button').appear({duration: 0.4});
    $('characters_enemies_image').appear({duration: 0.4});
    $('characters_text_enemies').appear({duration: 0.4});
  }
  
  $('characters_movie_frame').update("");
  $('characters_text_box').childElements().invoke('fade',{duration: 0.3});
  $('characters_names').childElements().invoke('fade',{duration: 0.3});
  setTimeout(fade_in_enemies,300);  
  
  $('characters_board_ninjas').observe('click',show_ninjas.bindAsEventListener(this));
}

function show_ninjas() {
  $('characters_board_ninjas').stopObserving('click').addClassName('board_active');
  $('characters_board_enemies').removeClassName('board_active');
  
  function fade_in_ninjas(){
    $('characters_text_hiro').appear({duration: 0.4});
    $('characters_names_hiro').appear({duration: 0.4, afterFinish: function(){
      play_character_movie('hiro');
    }});
  }
  
  $('characters_evil_button').fade({duration: 0.3});
  $('characters_enemies_image').fade({duration: 0.3});
  $('characters_text_enemies').fade({duration: 0.3});
  setTimeout(fade_in_ninjas,300);  
  
  $('characters_board_enemies').observe('click',show_enemies.bindAsEventListener(this));
}

function show_evil_screen() {
  $('characters_evil_fullscreen').show();
  $('characters_evil_fullscreen').fade({duration: 0.8, delay: 0.1});
}

function play_story_movie() {
  var movie_player = new Element('object',{
    "CLASSID": "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B",
    "width": "388",
    "height": "219",
    "CODEBASE": "http://www.apple.com/qtactivex/qtplugin.cab"
  });
  
  var params = $H({
    src: "data/games/minininjas/images/story/video.mov",
    qtsrc: "video.mov",
    autoplay: "true",
    loop: "true",
    controller: "false"
  });  
  
  params.each(function(param) {
    movie_player.insert({
      bottom: new Element('param',{
        "name": param.key,
        "value": param.value
      })
    });
  });
  
  var movie_file = new Element('embed',{
    "src": "data/games/minininjas/images/story/video.mov",
    "qtsrc": "video.mov",
    "width": "388",
    "height": "219",
    "autoplay": "true",
    "loop": "true",
    "controller": "false",
    "pluginspage": "/quicktime/download/"
  });
  
  movie_player.insert({ bottom: movie_file });
  
  $('story_container').insert({ bottom: movie_player });
}

function play_character_movie(character) {
  var video_file = character+".mov";
  
  var params = $H({
    name: "character_movie",
    src: "data/games/minininjas/images/characters/"+video_file,
    qtsrc: video_file,
    autoplay: "true",
    loop: "true",
    controller: "false",
    classid: "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B",
    codebase: "http://www.apple.com/qtactivex/qtplugin.cab",
    pluginspage: "/quicktime/download/",
    width: "428",
    height: "355",
    bgcolor: "ffffff",
    showlogo: "false",
    enablejavascript: "true"
  });
  
  var movie_player = new Element('object',{
    "id": params.get('name'),
    "CLASSID": params.get('classid'),
    "width": params.get('width'),
    "height": params.get('height'),
    "CODEBASE": params.get('codebase')
  });
  
  ['src','autoplay','loop','controller'].each(function(key) {
    movie_player.insert({
      bottom: new Element('param', {"name": key, "value": params.get(key)})
    });
  });
  
  var movie_file = new Element('embed',{
    "name": params.get('name'),
    "src": params.get('src'),
    "width": params.get('width'),
    "height": params.get('height'),
    "autoplay": params.get('autoplay'),
    "loop": params.get('loop'),
    "controller": params.get('controller'),
    "pluginspage": params.get('pluginspage'),
    "bgcolor": params.get('bgcolor'),
    "showlogo": params.get('showlogo'),
    "enableJavascript": params.get('enablejavascript')
  });
  
  movie_player.insert({ bottom: movie_file });
  
  $('characters_movie_frame').insert({ bottom: movie_player });
}