/*
jQuery Script for CVP - 
author : H.TANAKA by CVP
date   : 2009.09.15
--------------------------------------*/


(function($) {


$().ready(function() {
  this.obj = init();
  return this;
}); //ready


//jQuery.easing.def = "easeInOutQuad";


var cfg;
var itemWidth = new Array();


cfg = jQuery.extend({
  fh     : 34,
  mh     : 100,
  rh     : 20,
  opw    : 310,
  oph    : 500,
  imgObj : {
    on   : {
      src  : "cvp-web/img/bgimg_cntrl_on.gif"
    },
    off  : {
      src  : "cvp-web/img/bgimg_cntrl_off.gif"
    }
  }
},cfg);


$(window).resize(function(){

  this.ws = windowSize();
  this.hMain = this.ws.h-(cfg.fh+cfg.rh);
  this.hCont = this.ws.h-(cfg.fh+cfg.mh+cfg.rh);
  this.ngMarg = (this.hCont < cfg.opw)? 0: Math.floor((this.hCont-cfg.opw)/2);
  $("#contents").css({height:this.hMain+"px"});
  $("#menu").css({paddingTop: this.hCont+"px"});
  $("#main").css({marginTop:-this.hMain+"px",height:this.hCont+"px"});
  $("#main").children("div").css({height:this.hCont+"px",overflow:"auto"});
  $("#main").children("div").eq(0).find("h2").css({marginTop: this.ngMarg+"px"});

  sliderWidth = 0;
  $("#slider-img img").each(function(i){
    this.ws = windowSize();
    var w  = $(this).width();
    var h  = $(this).height();
    var is = imageSize(w, h, this.ws.w, this.ws.h-cfg.fh);
    sliderWidth += is.w_rslt;
    itemWidth[i] = sliderWidth;
    $("#slider-img img").eq(i).css({width:is.w_rslt+"px",height:is.h_rslt+"px"});
  });
  $("#slider-img").css({width:(sliderWidth+self.ws.w)+"px"});

  $("#nav").children("img").each(function(i){
    $(this).bind("click",function(){
      $("#cap").children("dl").css({display:"none"});
      $("#cap").children("dl.cap-"+i).css({display:"block"});
      $("#nav").children("img").removeClass("selected").attr("src",cfg.imgObj.off.src);
      $(this).addClass("selected").attr("src",cfg.imgObj.on.src);
      sliderNum(itemWidth,i);
    });
    if($(this).hasClass("selected")){
      var num = (i==0)?0:itemWidth[i-1];
      $("#slider-img").stop().animate({"left": -num+"px"},0);
    }
  });

}); //resize


var init = function() {
  this.ws = windowSize();
  this.hMain = this.ws.h-(cfg.fh+cfg.rh);
  this.hCont = this.ws.h-(cfg.fh+cfg.mh+cfg.rh);
  this.ngMarg = (this.hCont < cfg.opw)? 0: Math.floor((this.hCont-cfg.opw)/2);
  $("body").append("<div id=\"slider-img\"></div><div id=\"navigation\"><div class=\"inner clearfix\"><div id=\"nav\" class=\"left\"></div><div id=\"cap\" class=\"right\"></div></div></div><img src=\"cvp-web/img/loading.gif\" style=\"margin-left:"+(Math.floor(this.ws.w/2)-cfg.fh)+"px;margin-top:"+(Math.floor(this.ws.h/2)-cfg.fh)+"px;\" id=\"loading-img\" />");
  $("#contents").css({height:this.hMain+"px"});
  $("#menu").css({paddingTop: this.hCont+"px"});
  $("#menu dl dt img").css({marginTop: 5+"px",opacity: 0});
  $("#menu a").removeAttr("href");
  cssHover($("#menu dl dd img"));
  cssHover($("#menu h1 img"));
  $("#main").css({marginTop:-this.hMain+"px",height:this.hCont+"px"});
  $("#main").children("div").css({height:this.hCont+"px",overflow:"auto"});
  $("#main").children("div").eq(0).find("img").css({marginLeft: Math.floor((750-cfg.oph)/2)+"px"});
  $("#main").children("div").eq(0).find("h2").css({marginTop: this.ngMarg-10+"px",opacity:0});
  $("#main").children("div").eq(0).find("p").css({marginTop:"-10px",opacity:0});
  $("#main").children("div").eq(0).css({display:"block"}).addClass("selected");
  $("#contents").css({display:"none"});
  $("#main").children("div").css({display:"none"});
  $("#navigation").css({display:"none"});
  $("#footer").css({display:"none"});
  this.obj = getNode();
  return this;
}


var getNode = function() {
  $.ajax({
    type: "GET",
    url:"cvp-web/photo.xml",
    cache: false,
    dataType: "xml",
    timeout: 10000,
    error:function() {
      return true;
    },
    success:function(xml) {
      this.obj = new component(xml);
      return this;
    }
  });
}


var component = function(xml){ 
  this.ws = windowSize();
  this.data = xml; 
  this.hCont = this.ws.h-(cfg.fh+cfg.mh+cfg.rh);
  this.hMain = this.ws.h-(cfg.fh+cfg.rh);
  this.setup(); 
}


component.prototype = {
  setup: function(){
    var self = this;
    var leng = $(self.data).find("item").length - 1;
    var sliderWidth = 0;
    $(self.data).find("item").each(function(i){
      var title = $(self.data).find("item").eq(i).children("title").text();
      var author = $(self.data).find("item").eq(i).children("author").text();
      var link = $(self.data).find("item").eq(i).children("link").text();
      var capCls = "cap-" + i;
      var url = $(this).children("url").text();
      var w   = $(this).children("width").text();
      var h   = $(this).children("height").text();
      var bgimgCls = "bgimg-" + i;
      var is  = imageSize(w, h, self.ws.w, self.ws.h-cfg.fh);
      sliderWidth += is.w_rslt;
      itemWidth[i] = sliderWidth;
      $("#slider-img").append("<img src=\""+ url +"\" class=\""+bgimgCls+"\" style=\"width:"+is.w_rslt+"px;height:"+is.h_rslt+"px;\" width=\""+is.w_rslt+"\" height=\""+is.h_rslt+"\" />");
      $("#nav").append("<img src=\""+cfg.imgObj.off.src+"\" />&nbsp;&nbsp;&nbsp;");
      $("#cap").append("<dl class=\""+capCls+"\"><dt>"+title+"</dt><dd>"+author+"</dd><dd><a href=\""+link+"\" target=\"_blank\">"+link+"</a></dd></dl>");
      $("."+bgimgCls).css({opacity:"0"});
      $("."+capCls).css({display:"none"});
    });
    $("#slider-img").css({width:(sliderWidth+self.ws.w)+"px"});
    self.showWinsow(leng,itemWidth);
    self.setupSlider(itemWidth);
    self.setupCap();
  },
  showWinsow: function(leng,itemWidth){
    var self = this;
    $("#slider-img").find("img.bgimg-"+ leng).load(function () {
      $("#loading-img").fadeOut("slow",function(){
        var timeout1 = setTimeout(function(){
          $("#footer").slideDown("normal",function(){
            var timeout2 = setTimeout(function(){
              self.showContents(itemWidth);
              clearTimeout(timeout2);
            }, 500);
          });
          clearTimeout(timeout1);
        }, 500);
      });
    });
  },
  showContents: function(itemWidth){
    var self = this;
    var leng  = itemWidth.length;
    var i    = Math.floor( Math.random()*leng);
    //var i  = 1;
    var num  = (i==0)?0:itemWidth[i-1];
    $("#menu").css({display:"block"});
    $("#cap").css({opacity:0.5});
    $("#nav").children("img").eq(i).addClass("selected").attr("src",cfg.imgObj.on.src);
    $("#slider-img").css({left: -(num)+"px"});
    $("#slider-img").find("img").fadeTo("normal",1.0,function(){
      $("#navigation").fadeIn("normal",function(){
        $("#cap").children("dl").css({opacity:0});
        $("#cap").children("dl.cap-"+i).css({display:"block",opacity:0});
        var timeout1 = setTimeout(function(){
          $("#contents").slideDown(750,function(){
            $("#main").children("div").eq(0).addClass("selected").fadeIn("normal",function(){
              self.effectContents(0);
            });
            $("#rolling .btn img").fadeOut("normal",function(){
              $(this).attr("src","cvp-web/img/btn_rollup.jpg");
              $(this).fadeIn("normal",function(){
              });
            });
          });
        clearTimeout(timeout1);
        }, 500);
      });
    });
    cssHover($("#rolling .btn img"));
    self.setupRolling();
    self.setupMenu();
  },
  setupSlider: function(itemWidth){
    var self = this;
    cssHover($("#nav").children("img"));
    $("#nav").children("img").each(function(i){
      $(this).bind("click",function(){
        $("#cap").children("dl").css({display:"none"});
        $("#cap").children("dl.cap-"+i).css({display:"block"});
        $("#nav").children("img").removeClass("selected").attr("src",cfg.imgObj.off.src);
        $(this).addClass("selected").attr("src",cfg.imgObj.on.src);
        sliderNum(itemWidth,i);
      });
    });
  },
  setupCap: function(){
    $("#cap").hover(function(){
      $(this).stop().animate({opacity: 1.0}, 200);
      $(this).children("dl").stop().animate({opacity: 1.0},"fast");
    },function(){
      $(this).stop().animate({opacity: 0.5}, 200);
      $(this).children("dl").stop().animate({opacity: 0},"fast");
    });
  },
  setupRolling: function(){
    $("#rolling .btn img").toggle(function(){
      $("#contents").slideUp(750,function(){
        $("#rolling .btn img").fadeOut("normal",function(){
          $(this).attr("src","cvp-web/img/btn_rolldown.jpg");
          $(this).fadeIn("normal",function(){
          });
        });
      });
    },function(){
      $("#contents").slideDown(750,function(){
        $("#rolling .btn img").fadeOut("normal",function(){
          $(this).attr("src","cvp-web/img/btn_rollup.jpg");
          $(this).fadeIn("normal",function(){
          });
        });
      });
    });
  },
  setupMenu: function(){
    $("#menu dl").hover(function(){
      $(this).not(".selected").find("dt img").stop().animate({marginTop: "0px",opacity: 1.0}, 200);
    },function(){
      $(this).not(".selected").find("dt img").stop().animate({marginTop: "5px",opacity: 0}, 400);
    });
  },
  setupContents: function(){
    var self = this;
    $("#menu h1 img").bind("click",function(){
      $("#menu dl").removeClass("selected");
      $("#menu h1").addClass("selected");
      $("#menu dl").not(".selected").find("dt img").animate({marginTop: "5px",opacity: 0}, 200);
      $("#menu h1 img").unbind("click");
      $("#menu dl dd img").unbind("click");
      $("#main").children("div.selected").fadeOut("normal",function(){
        self.effectContents(0);
      });
    });
    $("#menu dl dd img").each(function(i){
      $(this).bind("click",function(){
        $("#menu h1").removeClass("selected");
        $("#menu dl").removeClass("selected");
        $("#menu dl").eq(i).addClass("selected");
        $("#menu dl").not(".selected").find("dt img").animate({marginTop: "5px",opacity: 0}, 200);
        $("#menu dl.selected dt img").css({marginTop: "0px",opacity: 1.0});
        $("#menu h1 img").unbind("click");
        $("#menu dl dd img").unbind("click");
        $("#main").children("div.selected").fadeOut("normal",function(){
          self.effectContents(i+1);
        });
      });
    });
  },
  effectContents: function(num){
    var self = this;
    var obj = new Object();
    obj.ws = windowSize();
    obj.hCont = this.ws.h-(cfg.fh+cfg.mh+cfg.rh);
    obj.ngMarg = (obj.hCont < cfg.opw)? 0: Math.floor((obj.hCont-cfg.opw)/2);
    if(num == 0){
      $("#main").children("div.selected").removeClass("selected");
      $("#main").children("div").eq(0).addClass("selected");
      $("#main").children("div.selected").find("h2").animate({marginTop: obj.ngMarg-10+"px",opacity: 0}, 10,function(){
        $("#main").children("div.selected").find("p").animate({marginTop: "-10px",opacity: 0}, 10,function(){
          $("#main").children("div.selected").fadeIn("normal",function(){
            $("#main").children("div.selected").find("h2").animate({marginTop: obj.ngMarg+"px",opacity: 1.0}, 500,function(){
              $("#main").children("div.selected").find("p").animate({marginTop: "0px",opacity: 1.0}, 500,function(){
                self.setupContents();
              });
            });
          });
        });
      });
    } else {
      $("#main").children("div.selected").removeClass("selected");
      $("#main").children("div").eq(num).addClass("selected");
      var timeout1 = setTimeout(function(){
        $("#main").children("div.selected").fadeIn(750,function(){
          self.setupContents();
        });
      clearTimeout(timeout1);
      }, 250);
    }
  }
}


var sliderNum = function(itemWidth,i){
  var num = (i==0)?0:itemWidth[i-1];
  $("#slider-img").stop().animate({"left": -(num)+"px"},1500);
}


var windowSize = function(){
  this.w  = window.innerWidth || self.innerWidth || (document.documentElement&&document.documentElement.clientWidth) || document.body.clientWidth;
  this.h = window.innerHeight || self.innerHeight || (document.documentElement&&document.documentElement.clientHeight) || document.body.clientHeight;
  return this;
}


var imageSize = function(w,h,wNew,hNew) {
  this.h_rslt = hNew;
  this.w_cal  = w / h;
  this.w_rslt = Math.floor(this.h_rslt * this.w_cal);
  return this;
}


function cssHover(value){
  $(value).hover(function(){
    $(this).css("cursor","pointer");
  },function(){
    $(this).css("cursor","default");
  });
}


})(jQuery);