/************************
 Handles room page
 - Prepare and hide room descirptions
 - Show room descriptions when thumbnails are clicked
 - Highligh current room thumbnail
 - Slide the thumbnail window
 - Slide thumbnail window when moving to next picture
 ************************/

Event.observe( window, 'load', eventHandler);

var ThumbCrossfade = Class.create();
ThumbCrossfade.prototype = {
    initialize : function (imageContainer) {
        this.current = 0;
    	this.imgs = $(imageContainer).getElementsByTagName('img');
    	for(i=0; i < this.imgs.length; i++) {
            this.imgs[i].xOpacity = 0;
            this.setOpacity(this.imgs[i]);
    	    this.imgs[i].style.display = 'none';
    	    this.imgs[i].style.position = 'absolute';
    	    this.imgs[i].style.top ='0';
    	    this.imgs[i].style.left ='0';
       	}
      	this.imgs[0].style.display = "block";
      	this.imgs[0].xOpacity = .99;
        this.blinkTimer = setInterval (this.blinkNavi.bind(this), 1000);
    }
    ,
    nextImage : function () {
    	n = this.imgs[this.current+1] ? this.current+1 : 0;
        this.toImage(n);
    }
    ,
    prevImage : function () {
    	n = this.imgs[this.current-1] ? this.current-1 : this.imgs.length-1;
        this.toImage(n);
    }
    ,
   	doFade : function () {
    	this.cOpacity = this.imgs[this.current].xOpacity;
     	this.nOpacity = this.imgs[this.nIndex].xOpacity;
       	
       	this.cOpacity-=.05; 
       	this.nOpacity+=.05;
        	
       	this.imgs[this.current].xOpacity = this.cOpacity;
       	this.imgs[this.nIndex].xOpacity = this.nOpacity;
        	
       	this.setOpacity(this.imgs[this.current]); 
       	this.setOpacity(this.imgs[this.nIndex]);
        	
       	if(this.cOpacity<=0) {
       		this.imgs[this.current].style.display = "none";
       		this.current = this.nIndex;
       		return;
       	} else {
            this.timer = setTimeout (this.doFade.bind(this), 50);
       	}
   	}
    ,
    setOpacity: function(obj) {
    	if(obj.xOpacity>.99) {
    		obj.xOpacity = .99;
    		return;
    	}
    	obj.style.opacity = obj.xOpacity;
    	obj.style.MozOpacity = obj.xOpacity;
    	obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }
    ,
    setNavi : function (navi) {
        this.navi = navi;
        $(navi).style.visibility = "visible";
        Event.observe(navi, 'click', this.nextImage.bind(this));
    }
    ,
    blinkNavi : function () {
        this.navion = (this.navion == 'on') ? 'off' : 'on';
        if (this.navion == "on") {
            $('blink').style.visibility = "visible";
        } else {
            $('blink').style.visibility = "hidden";
        }            
    },
    
    toImage : function (n) {
        this.nIndex = n;
     	this.imgs[this.nIndex].style.display = "block";
        $(this.navi).innerHTML = "<a href='javascript:void(0)'>" 
            + "<span id='blink'>次へ &gt;&gt;</span></a>";
       /* Copy texts to toptext, set thumb style, and slide */
        $('toptext').innerHTML = '<h2>' 
            + this.sectiontitle[n].innerHTML + '</h2>' 
            + this.sectiondes[n].innerHTML;
        for (i=0; i<this.thumbnails.length; i++) {
            this.thumbnails[i].className = 
                (i == n) ? 'curthumbnail' : 'thumbnail';
        }
        HScroll.scrollTo(this.thumbnails[n], 'leftbottomwindow', {
           time : .5*1000,	// [ms]
           unit : 25		// [ms]
        });
        this.doFade();
    }
    ,
    getThumbnails : function () {
        return this.thumbnails;
    }
    ,
    loadThumnail : function () {
        /* First, get thumbnail data and hide the rooms contents */
        this.textout = $('toptext');
        this.thumbnails = document.getElementsByClassName('thumbnail');
        this.sectiondes = document.getElementsByClassName('description');
        this.sectiontitle = document.getElementsByClassName('sectiontitle');    
        for (i=0; i < this.sectiondes.length; i++) {
                this.sectiondes[i].style.visibility = 'hidden';
        }
        this.s_imgs = $('sections').getElementsByTagName('img');
    }
}

/* Creates click funciton in non-IE */
HTMLElement.prototype.click = function() 
{
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}



function eventHandler() {
    /* Create slides on the top */
    slides = new ThumbCrossfade('topimage');
    slides.setNavi('imgnavi');    
    slides.loadThumnail();
    /* When thumbnail is clicked, show its main pictures and description, and slide */
    for (i=0; i<slides.getThumbnails().length; i++) {
        Event.observe (slides.getThumbnails()[i], 'click', slides.toImage.bind(slides, i));
    }
    /* Key board navigation */
    Event.observe(document, "keydown", function(event){
            if (event.keyCode == Event.KEY_RIGHT) {
                slides.nextImage();
            }
            if (event.keyCode == Event.KEY_LEFT) {
                slides.prevImage();
            }
            return true;
        }, true);    
        
    /* Show the first image */
    /*slides.getThumbnails()[0].click();*/
    slides.getThumbnails()[0].click();
}