/*--------------------------------------
    Position
---------------------------------------*/

var Position = new Class({
    
    initialize: function(options) {
        var boxes = $$('.box');
        boxes.each(function(box) {
            box.setStyles({
                'z-index': 9998
            });
        });
        
        var header = $('header');
        var globalNav = $('global-nav');
        var footer = $('footer');
        var h = window.getHeight();
        var headerHeight = header.getCoordinates().height;
        var footerHeight = footer.getCoordinates().height;
        header.setStyles({
            'z-index': 9999
        });
        footer.setStyles({
            'z-index': 9999
        });
    }
});

//window.addEvent('resize', function() { new Position });
//window.addEvent('domready', function() { new Position });

/*--------------------------------------
    Introduction Effect
---------------------------------------*/
var IntroductionEffect = new Class({
    path: 'http://www.chiikikagaku.co.jp/2011recruit/image/',
    images: [
        {
            path: '02.jpg',
            title: 'test'
        },
        {
            path: '03.jpg',
            title: 'test'
        },
        {
            path: '04.jpg',
            title: 'test'
        },
        {
            path: '05.jpg',
            title: 'test'
        },
    	{
            path: '07.jpg',
            title: 'test'
        }
    ],
    w: null,
    h: null,
    overlay: null,
    img: null,
    defImgWidth: 1600,
    defImgHeight: 1064,
    index: 0,
    initialize: function(options) {
        this.w = window.getWidth();
        this.h = window.getHeight();
        this.imgWidth = this.defImgWidth;
        this.imgHeight = this.defImgHeight;
        this.overlay = new Element('div', {
            'styles': {
                position: 'absolute',
                cursor: 'pointer',
                left: 0,
                width: this.w,
                height: this.h,
                overflow: 'hidden',
                'z-index': 1
            },
            'class': 'overlay',
            'events': {
                'click': function(){
                    this.next()
                }.bind(this)
            }
        });
        
        this.index = Math.floor(Math.random() * this.images.length);
        
        $$('body')[0].adopt(this.overlay);
        this.next();
    },
    
    next: function() {
        if (this.index == this.images.length - 1) {
            this.index = 0;
        } else {
            this.index += 1;
        }
    
        if (this.img) {
            this.img.effect(
                'opacity', 
                { 
                    duration: 1000,
                    onComplete: function() {
                        this.img.remove();
                        this.imageSet();
                    }.bind(this)
                }
            ).start(0);
        } else {
            this.imageSet();
        }
    },
    
    resize: function() {
        this.w = window.getWidth();
        this.h = window.getHeight();
        
        var rate = this.w / this.imgWidth;
        this.imgWidth = this.w;
        this.imgHeight = Math.floor(this.imgHeight * rate);
        
        if (this.imgHeight < this.h) {
            rate = this.h / this.imgHeight;
            this.imgWidth = Math.floor(this.imgWidth * rate);
            this.imgHeight = this.h;        
        }
        
        this.overlay.setStyles({
            width: this.w,
            height: this.h
        });
        this.img.setStyles({
            'margin-top': (this.h / 2) - (this.imgHeight / 2),
            'margin-left': (this.w / 2) - (this.imgWidth / 2)
        });
        this.img.setProperties({
            width: this.imgWidth,
            height: this.imgHeight
        })
    },
    
    imageSet: function() {
        this.img = new Asset.image(
            this.path + this.images[this.index].path, 
            {
                onload: function() {
                    this.img.setStyles({
                        opacity: 0
                    });
                    this.overlay.adopt(this.img);
                    this.img.effect('opacity', { duration: 1000 }).start(1);
                    this.resize();
                }.bind(this)
            }
        );
    }
});

var effect;
window.addEvent('domready', function() { effect = new IntroductionEffect() });
window.addEvent('resize', function() { effect.resize() });