'use strict';

oml.ui.previewDialog = function() {

    var ui = oml.user.ui,

        $image,
        $list = oml.$ui.list,
        item = Ox.last($list.options('selected')),
        imageRatio = $list.value(
            item, ui.icons == 'cover' ? 'coverRatio' : 'previewRatio'
        ) || oml.config.iconRatio,
        size = getSize(imageRatio),

        that = Ox.Dialog({
            closeButton: true,
            content: Ox.Element(),
            fixedRatio: true,
            focus: false,
            height: size.height,
            maximizeButton: true,
            title: Ox._('Loading...'),
            width: size.width
        })
        .bindEvent({
            resize: function(data) {
                $image.css({
                    width: data.width,
                    height: data.height
                });
            },
            oml_find: function() {
                that.close();
            },
            oml_item: function() {
                that.close();
            },
            oml_page: function() {
                that.close();
            }
        });

    function getSize(posterRatio) {
        var windowWidth = window.innerWidth * 0.8,
            windowHeight = window.innerHeight * 0.8,
            windowRatio = windowWidth / windowHeight;
        return {
            width: Math.round(
                posterRatio > windowRatio ? windowWidth : windowHeight * posterRatio
            ),
            height: Math.round(
                posterRatio < windowRatio ? windowHeight : windowWidth / posterRatio
            )
        };
    }

    that.updateElement = function() {
        oml.api.get({
            id: Ox.last($list.options('selected')),
            keys: ['coverRatio', 'id', 'modified', 'previewRatio', 'title']
        }, function(result) {
            var item = result.data,
                imageRatio = item[
                    ui.icons == 'cover' ? 'coverRatio' : 'previewRatio'
                ] || oml.config.iconRatio,
                size = getSize(imageRatio),
                title = Ox.encodeHTMLEntities(item.title);
            $image = $('<img>')
                .attr({
                    src: '/' + item.id + '/cover128.jpg?' + item.modified
                })
                .css({
                    width: size.width + 'px',
                    height: size.height + 'px'
                });
            $('<img>')
                .load(function() {
                    $image.attr({
                        src: $(this).attr('src')
                    });
                })
                .attr({
                    src: '/' + item.id + '/' + ui.icons + '1024.jpg?' + item.modified
                });
            that.options({
                    content: $image,
                    title: title,
                })
                .setSize(size.width, size.height);
        });
        return that;
    };

    return that.updateElement();

};