window.addEvent('domready',function(){
    var _bg = new ImageResizer('#bg');
});

var ImageResizer = new Class({
    e : undefined,
    w : undefined,
    h : undefined,
    ar : undefined,
    orient : undefined,
    portrait : 1,
    landscape : 2,
    viewport : undefined,
    ww : undefined,
    wh : undefined,
    worient : undefined,
    initialize : function(sel){
        this.e = $(document.body).getElement(sel);
        this.e.setStyles({
            'top' : 0,
            'left' : 0,
            'position' : 'absolute'
        });
        this.w = this.e.get('width');
        this.h = this.e.get('height');
        this.ar = this.w / this.h;
        this.orient = this.w >= this.h ? this.landscape : this.portrait;
        this.create_viewport();
    },
    create_viewport : function(){
        this.viewport = new Element('div');
        this.viewport.setStyles({
            'position' : 'absolute',
            'top' : 0,
            'left' : 0,
            'backgroundColor' : '#000',
            'color' : '#fff'
        });
        //$(document.body.grab(this.viewport));
        window.addEvent('resize',this.update_viewport.bind(this));
        this.update_viewport();
    },
    update_viewport : function(){
        this.get_window_dimensions();
        this.worient = this.ww >= this.wh ? this.landscape : this.portrait;
        this.viewport.set('text',this.ww.toString() + ' x ' + this.wh.toString() + ' ' + (this.worient == this.portrait ? 'portrait' : 'landscape') + ' ' + this.e.getStyle('top'));
        this.resize_image();
    },
    get_window_dimensions : function(){
        if (Browser.Platform.ipod) {
            this.ww = 800;
            this.wh = 800;
        } else {
            var s = window.getSize();
            this.ww = s.x;
            this.wh = s.y;
        }
    },
    resize_image : function(){
        var current_w = this.e.get('width'), current_h = this.e.get('height');
        //if the new aspect raio isn't the same as the original image, we need to reize the image so that we don't see any background
        //resize the image, maintaining aspect ratio, and so it's larger than or equal to the window size
        // get scale by dividing by each window dimension
        var scale_w = this.w / this.ww;
        // calculate the scaled height of the window, using the width as a scale
        var scaled_w_h = this.h / scale_w;
        // scale the image height by the window height
        var scale_h = this.h / this.wh;
        // scale the height by the vertical scale
        var scaled_h_w = this.w / scale_h;
        // both the new width and the proposed scale width need to be >= the window size
        var new_w, new_h, new_pos;
        if (scaled_w_h >= this.wh) {
            new_w = this.ww;
            new_h = scaled_w_h;
            // the position needs to be changed
            var diff = (this.wh - scaled_w_h) * -1;
            if (diff > 0){
                new_pos = (diff / 2) * -1;
            } 
        } else if (scaled_h_w >= this.ww) {
            new_w = scaled_h_w;
            new_h = this.wh;
            new_post = 0;
        }
        this.e.setStyles({
            'width' : new_w,
            'height' : new_h,
            'top' : new_pos
        });
    }
});