var introPhotoLoaded = false;
var introPhotoId     = '#intro .photo';
var workPhotoLoaded  = false;
var workPhotoId      = '#work .photo';
var videoMovieLoaded = false;
var videoMovieId     = '#video .movie';

var popupBgId        = '#popup_bg';
var popupWinId       = "";

$(document).ready(function() {
  
  var offsetX = 50 + 1;
  var offsetW = 20 - 2;
  var nameList = [
        "home", "news", "intro",
        //"company",
        "work", "exhibition", "book", "collection", "video",
        //"contact",
        //"aboutus",
        "organization", "contactus",
        "eng"
        ];
  
  for(i=0; i<nameList.length; i++) {
    var name = nameList[i];
    var selected = parseInt($('#main_menu .menu_flow_'+name).attr('selected'), 10);
    var h = 0;
    
    $('#main_menu .menu_flow_'+name)
      .css('left', $('#main_menu .menu_'+name).position().left + offsetX)
      .css('width', $('#main_menu .menu_'+name).width() + offsetW)
      .css('height', h)
      ;
    
    if(selected==1) {
      $('#main_menu .menu_flow_'+name)
        .animate({'height':26}, 500)
        ;
    }
  }
  // ----------
  
  MoveSlogon();
  MoveBook();
  MoveExhibition();
  
  $('#main_menu .menu').hover(
    function() {
      var menu = $(this).attr('menu').toString();
      var selected = parseInt($(this).attr('selected'), 10);
      
      if(selected==0) {
        $('#main_menu .menu_flow_'+menu).animate({'height':26}, 200);
      }
    },
    function() {
      var menu = $(this).attr('menu').toString();
      var selected = parseInt($(this).attr('selected'), 10);
      
      if(selected==0) {
        $('#main_menu .menu_flow_'+menu).animate({'height':0}, 500);
      }
    }
  );
  $('#main_menu .menu_collection').click(function() {
    var url = './weblink/productWeb/p1.html';
    window.open(url);
    return(false);
  });
  $('#main_menu .menu_eng').click(function() {
    var url = './pdf/HuluLeaflet_Eng.pdf';
    window.open(url);
    return(false);
  });
  // ----------
  
  $('#news .event, #news .exhibition').click(function() {
    var url = siteRoot+'/?a=exhibition';
    window.location = url;
  });
  $('#news .book').click(function() {
    var url = siteRoot+'/?a=book';
    window.location = url;
  });
  // ----------
  
  $('#intro .button_summary').click(function() {
    $('#intro .button_summary').removeClass('button_sel button_nor').addClass('button_sel');
    $('#intro .button_goal').removeClass('button_sel button_nor').addClass('button_nor');
    $('#intro .content_summary').fadeIn();
    $('#intro .content_goal').hide();
    return(false);
  });
  
  $('#intro .button_goal').click(function() {
    $('#intro .button_summary').removeClass('button_sel button_nor').addClass('button_nor');
    $('#intro .button_goal').removeClass('button_sel button_nor').addClass('button_sel');
    $('#intro .content_summary').hide();
    $('#intro .content_goal').fadeIn();
    return(false);
  });
  
  $('#intro .button_photo').click(function() {
    CreateIntroPhoto();
    ShowPopupBg();
    ShowIntroPhoto();
  });
  
  // ----------
  
  $('#work .button').click(function() {
    var work = $(this).attr('work');
    $('#work .button').removeClass('button_sel button_nor').addClass('button_nor');
    $('#work .button_work_'+work).removeClass('button_sel button_nor').addClass('button_sel');
    $('#work .content').hide();
    $('#work .content_work_'+work).fadeIn();
    return(false);
  });
  $('#work .button_photo').click(function() {
    var num = $(this).attr('photo');
    CreateWorkPhoto();
    ShowPopupBg();
    ShowWorkPhoto(num);
  });
  // ----------
  
  $('#video .content a').click(function() {
    var num = $(this).attr('num');
    CreateVideoMovie();
    ShowPopupBg();
    ShowVideoMovie(num);
    return(false);
  });
  // ----------
  
  $('#aboutus .button_company').click(function() {
    $('#aboutus .button_company').removeClass('button_sel button_nor').addClass('button_sel');
    $('#aboutus .button_contact').removeClass('button_sel button_nor').addClass('button_nor');
    $('#aboutus .content_company').fadeIn();
    $('#aboutus .content_contact').hide();
    return(false);
  });
  
  $('#aboutus .button_contact').click(function() {
    $('#aboutus .button_company').removeClass('button_sel button_nor').addClass('button_nor');
    $('#aboutus .button_contact').removeClass('button_sel button_nor').addClass('button_sel');
    $('#aboutus .content_company').hide();
    $('#aboutus .content_contact').fadeIn();
    return(false);
  });
  
  $(popupBgId).click(function() {
    HidePopupBg();
  });
  // ----------
  
});
// -- end --

function MoveSlogon() {
  $('#home .slogon').delay(1000);
  $('#home .slogon').fadeOut(3000);
  $('#home .slogon').fadeIn(3000, function() {
    $('#home .slogon').delay(2000);
    MoveSlogon();
  });
}
// -- end of MoveSlogon --

function MoveBook() {
  var banner = '#home .book .banner';
  var count = 4-1;
  for(i=0; i<count; i++) {
    $(banner).delay(2000);
    $(banner).animate({left:'-=150'}, 500);
  }
  $(banner).delay(2000);
  $(banner).animate({left:'0'}, 500, function() {
    MoveBook();
  });
}
// -- end of MoveBook --

function MoveExhibition() {
  var banner = '#home .exhibition .banner';
  var count = 4-1;
  for(i=0; i<count; i++) {
    $(banner).delay(2000);
    $(banner).animate({left:'-=150'}, 500);
  }
  $(banner).delay(2000);
  $(banner).animate({left:'0'}, 500, function() {
    MoveExhibition();
  });
}
// -- end of MoveExhibition --

function CreateIntroPhoto() {
  if(introPhotoLoaded) return;
  introPhotoLoaded = true;
  
  html = '<img src=\"./images/intro_photo.jpg\" />';
  $(introPhotoId).append(html);
}
// -- end of CreateIntro --

function ShowIntroPhoto() {
  $(introPhotoId).fadeIn();
  popupWinId = introPhotoId;
}
// -- end of ShowIntroPhoto --

function CreateWorkPhoto() {
  if(workPhotoLoaded) return;
  workPhotoLoaded = true;
  
  html = '<img/>';
  $(workPhotoId).append(html);
}
// -- end of CreateWorkPhoto --

function ShowWorkPhoto(num) {
  $(workPhotoId+' img').attr('src', './images/work_photo_'+num+'.jpg');
  $(workPhotoId).fadeIn();
  popupWinId = workPhotoId;
}
// -- end of ShowWorkPhoto --

function CreateVideoMovie() {
  if(videoMovieLoaded) return;
  videoMovieLoaded = true;
}
// -- end of CreateVideoMovie --

function ShowVideoMovie(num) {
  var html = '';

  html+= '<object id=\'player\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' name=\'player\' width=\'768\' height=\'576\'>';
    html+= '<param name=\'movie\' value=\'./player-viral.swf\' />';
    html+= '<param name=\'allowfullscreen\' value=\'true\' />';
    html+= '<param name=\'allowscriptaccess\' value=\'always\' />';
    html+= '<param name=\'flashvars\' value=\'file=./video/M'+num+'.flv&image=./images/video_preview_'+num+'.jpg\' />';
    html+= '<embed';
    html+= ' type=\'application/x-shockwave-flash\' ';
    html+= ' id=\'player2\' ';
    html+= ' name=\'player2\' ';
    html+= ' src=\'./player-viral.swf\' ';
    html+= ' width=\'768\' ';
    html+= ' height=\'576\' ';
    html+= ' allowfullscreen=\'true\' ';
    html+= ' allowscriptaccess=\'always\' ';
    html+= ' flashvars=\'file=./video/M'+num+'.flv&image=./images/video_preview_'+num+'.jpg\' ';
    html+= '/>';
  html+= '</object>';

  $('#video .movie').empty().append(html).show();
  popupWinId = videoMovieId;
}
// -- end of ShowVideoMovie --

function HideVideoMovie() {
  $('#video .movie').empty();
}
// -- end of HideVideoMovie --

function ShowPopupBg() {
  $(popupBgId).show();
}
// -- end of ShowPopupBg --

function HidePopupBg() {
  $(popupBgId).hide();
  if(popupWinId==videoMovieId) {
    HideVideoMovie();
  }
  if(popupWinId!='') {
    $(popupWinId).hide();
    popupWinId = '';
  }
}
// -- end of HidePopupBg --