var MediaViewItemImage = new Class({
    Extends: MediaViewItem,

    url: null,
    alt: "",
    isInitialized: false,
    preloader: null,
    img: null,
    originalWidth: 0,
    originalHeight: 0,
    aspectRatio: 0,

    initialize: function(mediaView,url,alt){
        this.parent(mediaView);
        this.url = url;
        this.alt = alt;

        this.element.addClass("MediaViewItemImage");

//        this.overlay = new Element("div");
//        this.overlay.addClass("overlay");
//        this.overlay.inject(this.element);
//
//        var title = String(this.alt).split("|");
//        var subTitle = "";
//        if( title.length > 1 )
//        {
//            subTitle = title[1];
//        }
//        title = title[0];
//
//        var strong = new Element("strong");
//        strong.set("text",title);
//        strong.inject(this.overlay);
//
//        if( subTitle.length > 0 )
//        {
//            var span = new Element("span");
//            span.set("text",subTitle);
//            span.inject(this.overlay);
//        }
    },
    getElement: function(){
        if( this.isInitialized == false )
        {
            this.element.addClass("loading");
            this.preloader = new Image();
            this.preloader.instance = this;
            this.preloader.onload = this.preloaderOnLoad.bind(this);
            this.preloader.src = this.url;
            this.isInitialized = true;
        }
        return this.element;
    },
    preloaderOnLoad: function(){
        this.img = new Element("img");
        this.originalWidth = this.preloader.width;
        this.originalHeight = this.preloader.height;
        this.aspectRatio = this.originalWidth / this.originalHeight;
        this.img.src = this.url;

        this.img.fx = new Fx.Tween(this.img,{link:"cancel"});
        this.img.fxMorph = new Fx.Morph(this.img,{link:"cancel"});
        this.img.fx.set("opacity",0);
        this.img.inject(this.element);
        this.img.fx.start("opacity",1);

        this.element.removeClass("loading");
        this.onResize(true);
    },
    onResize: function(disableAnimation){
        if( this.parent() == false )
        {
            return;
        }

        var width = this.currentWidth;
        var height = this.currentHeight;

        if( this.orignalWidth > this.originalHeight )
        {
            if( (height = width * this.aspectRatio) > this.currentHeight )
            {
                height = this.currentHeight;
                width = height / this.aspectRatio;
            }
        }
        else
        {
            if( (width = height * this.aspectRatio) > this.currentWidth )
            {
                width = this.currentWidth;
                height = width / this.aspectRatio;
            }
        }

        var left = Math.round(width - this.currentWidth)/2;
        var top = Math.round(height - this.currentHeight)/2;

        if( this.mediaView.element.hasClass("portrait") == true )
        {
            top = 0;
        }

        if( disableAnimation == true )
        {
            this.img.fxMorph.set({
                "margin-left": -left,
                "margin-top": -top,
                "width": width,
                "height": height
            });
        }
        else
        {
            this.img.fxMorph.start({
                "margin-left": -left,
                "margin-top": -top,
                "width": width,
                "height": height
            });
        }
    }
});