feature_img_ids = ["feature_img_1","feature_img_2","feature_img_3","feature_img_4"];
feature_navi_ids = ["feature_navi_1","feature_navi_2","feature_navi_3","feature_navi_4"];

feature_img_target_transparency = [0,0,0,0];
feature_img_current_transparency = [0,0,0,0];
auto_paging_current = 0;
dissolve_period     = 0.3;
auto_paging_period  = 5.0; //変わる時間を変えたい場合はここ(秒)
auto_paging_counter = auto_paging_period;

fps = 15.0;
interval = 1.0/fps;
function initialize_features_selector()
{
  for(i=0; i<feature_img_ids.length; ++i) {
    opacity = 100.0 * feature_img_current_transparency[i];
    $(feature_img_ids[i]).style.filter = "alpha(opacity="+opacity+")";
    $(feature_img_ids[i]).style.MozOpacity = feature_img_current_transparency[i];
    $(feature_img_ids[i]).style.opacity = feature_img_current_transparency[i];
  }
  features_selector('feature_img_1');
  var periodicalAleter = new PeriodicalExecuter(transparencyControl, 1.0/fps);
}

function transparencyControl()
{
  auto_paging_counter -= interval;
//    console.log(auto_paging_counter);
  if (auto_paging_counter<0.0)
  {
    auto_paging_current++;
    auto_paging_current%=feature_img_ids.length;
    auto_paging_counter=auto_paging_period;
    features_selector('feature_img_'+(auto_paging_current+1));
  }

//    alert(feature_img_ids.length);
  for(i=0; i<feature_img_ids.length; ++i) {
    if (feature_img_current_transparency[i] == feature_img_target_transparency[i])
    {
      continue;
    }
    else if (feature_img_current_transparency[i] < feature_img_target_transparency[i])
    {
      feature_img_current_transparency[i] += interval/dissolve_period;
      if (feature_img_current_transparency[i]>1.0)
        feature_img_current_transparency[i] = 1.0;
    }
    else if (feature_img_current_transparency[i] > feature_img_target_transparency[i])
    {
      feature_img_current_transparency[i] -= interval/dissolve_period;
      if (feature_img_current_transparency[i]<=0.0)
      {
        feature_img_current_transparency[i] = 0.0;
        hide_window(feature_img_ids[i]);
      }
    }
//      alert(feature_img_ids[i]);
//      console.log(opacity);
    opacity = 100.0 * feature_img_current_transparency[i];
    $(feature_img_ids[i]).style.filter = "alpha(opacity="+opacity+")";
    $(feature_img_ids[i]).style.MozOpacity = feature_img_current_transparency[i];
    $(feature_img_ids[i]).style.opacity = feature_img_current_transparency[i];
  }
}

function features_selector(id)
{
  auto_paging_counter = auto_paging_period;
  for(i=0; i<feature_img_ids.length; ++i) {
//      console.log(feature_img_ids[i]+":"+id);
//      $(id).style.left = $('features').offsetLeft+"px";
//      $(id).style.top = $('features').offsetTop+"px";
    if (id == feature_img_ids[i])
    {
      auto_paging_current = i;
      show_window(id);
      $(feature_navi_ids[i]).className='selected';
      feature_img_target_transparency[i] = 1.0;
//        console.log("show:"+id);
    }
    else
    {
//        hide_window(feature_img_ids[i]);
      feature_img_target_transparency[i] = 0.0;
      $(feature_navi_ids[i]).className='normal';
    }
  }
//    console.log(feature_img_ids.length+feature_img_target_transparency);
}

if (window.addEventListener) { //for W3C DOM
  window.addEventListener("load", initialize_features_selector, false);
} else if (window.attachEvent) { //for IE
  window.attachEvent("onload", initialize_features_selector);
} else  {
  window.onload = initialize_features_selector;
}