var ModalWindow = {};
ModalWindow = function(options){
// private variables
    var _options = options || {};
    var _disableScrolling = _options && _options.disableScrolling ? _options.disableScrolling : false;
    var _template = {};
    _template.window = ' \
    <div id="modal-window" style="display:none"> \
        <table id="modal-window-table"> \
            <tbody> \
                <tr> \
                    <td class="tl" /> \
                    <td class="tm" /> \
                    <td class="tr" /> \
                </tr> \
                <tr> \
                    <td class="ml" /> \
                    <td class="mm"> \
                        <div id="modal-window-content" style="overflow:auto" /> \
                    </td> \
                    <td class="mr" /> \
                </tr> \
                <tr> \
                    <td class="bl" /> \
                    <td class="bm" /> \
                    <td class="br" /> \
                </tr> \
            </tbody> \
        </table> \
        <a title="Close window" id="modal-window-close" /> \
        <div id="modal-window-nav" /> \
    </div>';
    _template.loading = '<div id="modal-window-loading">Loading...</div>';
    _template.overlay = '<div id="modal-window-overlay" />';
    var _selector = {
        window:'#modal-window',
        content:'#modal-window-content',
        close:'#modal-window-close',
        overlay:'#modal-window-overlay',
        loading:'#modal-window-loading',
        nav:'#modal-window-nav'
    }
    
// private methods

    function _createWindow() {
        if(jQuery.fn.pngFix) $(document).pngFix();
        if(_disableScrolling) $('html,body').css({ 'overflow':'hidden' });
        
        // create overlay
        $(_selector.overlay).remove();
        var css = {
            'width':'100%',
            'height':'100%',
            'top':0,
            'left':0,
            'opacity':'0.9',
            'position':'fixed',
            'background':'#000000',
			'z-index':'200'
        };
        if($.browser.msie && $.browser.version < 7) {
            $.extend(css, {
                'position':'absolute',
                'height':$(document).height()
            });
        }
        var overlay = $(_template.overlay).css(css).click(function(){
            _closeWindow();
        });
        $('body').append(overlay);
        
        // Create loading
        $(_selector.loading).remove();
        var loading = $(_template.loading).css({
            'top':0,
            'left':0,
            'position':'absolute',
            'color':'#FFFFFF',
            'padding':'1em',
            'font-size':'1em',
            'z-index':'10000'
        });
        $('body').append(loading);
        $(_selector.loading).vCenter();
        
        // Create window
        $(_selector.window).remove();
        if(_options.windowTemplate) {
            _template.window = _options.windowTemplate;
        }
        $('body').append(_template.window);
        var css = {
            'position':'absolute',
            'top':0,
            'left':0,
            'width':'auto',
			'z-index':'10001'
        }
        $(_selector.window).hide().css(css);
        
        $(_selector.close).click(function(event){
            event.preventDefault();
            _closeWindow();
        });
    }
    
    function _closeWindow() {
        $(_selector.loading).hide();
        $(_selector.window).fadeOut('fast');
        $(_selector.overlay).remove();
        if(_disableScrolling) $('html,body').css({'overflow':'auto'});
    }
    
    function _showImage(src) {
        var image = new Image;
        $(_selector.window).vCenter();
        $(_selector.loading).vCenter().show();
        $(image).load(function(event){
            $(_selector.loading).fadeOut();
            $(_selector.content).html(this);
            $(_selector.window).vCenter();
            $(_selector.window).fadeIn('normal');
        });
        $(image).css({'display':'block'}).attr('src', src);
    }
    
// public methods
    
    /**
     * Loading and show image
     * @param {Object} src
     */
    this.showImage = function(src) {
        _createWindow();
        // Loading image
        var image = new Image;
        $(image).load(function(event){
            $(_selector.loading).fadeOut();
            $(_selector.content).html(this);
            $(_selector.window).vCenter();
            $(_selector.window).fadeIn('normal');
        });
        $(image).css({'display':'block'}).attr('src', src);
    }
    
    /**
     * Create gallery images
     * @param {object} options
     */
    this.createGallery = function(options) {
        if($(options.items)) {
            var items = $(options.items);
            var current = 0;
            var showCurrentImage = function() {
                var item = $(items[current]);
                var data = options.dataPath == '' ? $(item) : $(item).find(options.dataPath);
                var src = $(data).attr('href');
                var title = $(data).attr('title');
                $(_selector.nav).append($('<p id="modal-window-caption" />'));
                $('#modal-window-caption').html((current + 1) + '. ' + title);
                _showImage(src);
            }
            $(options.items).each(function(i, item){
                $(item).bind('click', {'index': i}, function(event){
                    event.preventDefault();
                    current = event.data['index'];
                    _createWindow();
                    if(items.length > 1) {
                        var pager = $('<div id="modal-window-pager" class="clearfix"></div>');
                        var next = $('<a class="next">Next</a>').click(function(event){
                            current++;
                            if(current >= items.length) current = 0;
                            showCurrentImage();
                        });
                        var prev = $('<a class="prev">Prev</a>').click(function(event){
                            current--;
                            if(current < 0) current = items.length - 1;
                            showCurrentImage();
                        });
                        pager.append(prev);
                        pager.append(next);
                        $(_selector.nav).append(pager);
                    }
                    showCurrentImage();
                });
            });
        }
    }
    
    this.showAjax = function(href, options, callback) {
        _createWindow();
        if(options.size) {
            var size = options.size.split('x');
            $(_selector.content).css({
                'width':size[0] + 'px',
                'height':size[1] + 'px',
                'overflow':'auto'
            });
        }
        $.get(href, function(data){
            $(_selector.loading).fadeOut();
            $(_selector.content).html(data);
            $(_selector.window).vCenter();
            $(_selector.window).fadeIn('normal');
            callback();
        });
    }
    
    this.showIframe = function(href, options) {
        _createWindow();
        var iframe = $('<iframe />').css({
            'border':0,
            'padding':0,
            'mergin':0
        }).attr('src', href);
        if(options.css) $(iframe).css(options.css);
        $(_selector.loading).fadeOut();
        $(_selector.content).html(iframe);
        $(_selector.window).vCenter();
        $(_selector.window).fadeIn('normal');
    }

	this.showMediaCoverage = function(options) {
		_createWindow();
        // Loading image
        $('<img />').load(function(event){
            $(_selector.loading).fadeOut();
            $(_selector.content).html(this);
            $(_selector.window).vCenter();
            $(_selector.window).fadeIn('normal');

			var description = $('<div class="media-coverage-detail"></div>"')
			.css({width: $(this).width() + 'px'})
			.append($('<h2 class="media-coverage-title"></h2>').html(options.title))
			.append($('<p class="media-coverage-download"></p>').html(options.download))
			.append($('<div class="media-coverage-description"></div>').html(options.description));
			$(_selector.nav).append(description);
			
			$(_selector.window).vCenter();
        })
		.css({'display':'block'})
		.attr('src', options.src);
	}
    
    this.close = function() {
        _closeWindow();
    }
}