/* 
Takanami Fusion
(c) 2009 Magnetic Impact
*/

window.addEvent('domready', function() {

  // dropdown slides bar
  var photoSlidesBar = $('photo_slides_bar');
  var photoSlidesBarSlider = new Fx.Morph(photoSlidesBar, {
    onStart: function() {
      //alert('x'); //debug
      photoSlidesBar.highlight('#fff');
      //alert('y'); //debug
    }
  });
  var photoSliderBarStart = function() {
    photoSlidesBarSlider.start({
      'top':0,
      'width':170
    });
  }
  
  var pageMiddleDiv = $('photo_page_middle');
  var pageMiddleSwiper = new Fx.Morph(pageMiddleDiv, {
    onStart: function() {
      pageMiddleDiv.highlight('#fff');
    },
    onComplete: function() {
      //alert('a'); //debug
      displayPhotoThumbnails();
      //alert('b'); //debug
      displayPhotoThumbnailSliderControl();
      //alert('c'); //debug
      fullImageDivSlideIn();
      //alert('d'); //debug
    }
  });
  var pageMiddleSwipeStart = function() {
    pageMiddleSwiper.start({
      'width':750
    });
  }

  // display photo thumbnails
  var displayPhotoThumbnails = function() {
    $('photo_slides').setStyle('display','block');
  }
  
  //display thumbnail slider control
  var displayPhotoThumbnailSliderControl = function() {
    $('photo_thumbnail_slider_control').setStyle('opacity',1);
  }

  // code to make thumbnail slider work
  var sliderObject = $('photo_thumbnail_slider_control');
  var knobObject = $('photo_thumbnail_slider_knob');
   
  var scrollRange = 330 - 3715 + 130;
  var SliderObject = new Slider(sliderObject , knobObject , {
      range: [12, scrollRange],
      snap: false,
      steps: 100,
      offset: 0,
      wheel: true,
      mode: 'vertical',
      onChange: function(step){
        $('photo_thumbnail_slider_knob').setStyle('background-image',"url('images/slider-knob-lit.gif')");
        $('photo_slides').setStyle('top', step);
      },
      onTick: function(pos){
      	this.knob.setStyle('top', pos);
      },
      onComplete: function(){
        $('photo_thumbnail_slider_knob').setStyle('background-image',"url('images/slider-knob.gif')");
      }
  });

  // light up slider knob on mouseenter
  $('photo_thumbnail_slider_knob').addEvent('mouseenter',function(){
    $('photo_thumbnail_slider_knob').setStyle('background-image',"url('images/slider-knob-lit.gif')");
  });

  // dim down slider knob on mouseleave  
  $('photo_thumbnail_slider_knob').addEvent('mouseleave',function(){
    $('photo_thumbnail_slider_knob').setStyle('background-image',"url('images/slider-knob.gif')");
  });


  
  //slide in full image div
  var fullImageDiv = $('photo_full_pic_div');
  var fullImageDivSlider = new Fx.Morph(fullImageDiv); 
  var fullImageDivSlideIn = function() {
    fullImageDiv.setStyle('opacity',0);
    $('photo_01').setStyle('opacity',1);
    fullImageDivSlider.start({
      'left':66,
      'opacity':1
    });
  }

  
  // photo item selection based on clicks on thumbnails
  var fadeOutFullImage = function() {
    //alert('fade out');  //debug
    $$('.full_img').each(function(fullImage) {
      fullImage.setStyle('opacity',0);
      fullImage.setStyle('display','none');
    });
  };
  var fadeInFullImage = function(elID) {
    //alert('fade in:' + elID); //debug
    
    $(elID).setStyle('opacity',1);
    $(elID).setStyle('display','block');
    
  }
  
  var photoItems = $$('.photo_item_selection');
  photoItems.each(function(photoItem) {
    photoItem.addEvent('click',function(event) {
      event.stop();
      
      elID = photoItem.get('id');
      elID = elID.split("_sel")[0];
      
      fadeOutFullImage();
      fadeInFullImage(elID);
      
      
    });
  });
  
  //start page animations
  photoSliderBarStart();
  pageMiddleSwipeStart.delay(500);

});