/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
(function (window, $) { 
    
    var lastFocus;
    
    function closeImageModal(dialog) {
        dialog.data.fadeOut('fast', function () {
                dialog.container.slideUp('fast', function () {
                        dialog.overlay.fadeOut('fast', function () {
                            $.modal.close(); // must call this!
                            $('#page').attr('aria-hidden','false'); 
                            lastFocus.focus();
                        });
                });
        });
    }
    
    function createImageModal(event,title, uri, photo_credit, caption){
         event.preventDefault();
        var image_modal_string = '<div id="simplemodal-data-image">\n\
            <div class="imageModal">\n\
            <div class="modal-image-and-photocredit-container"><img alt="' + title + '" src="' + uri + '">';
        if (photo_credit && (photo_credit!='')){
            image_modal_string += '<div class="photocredit">Credit: ' + photo_credit + '</div></div>';
        }
        if (caption && (caption !='')){
             image_modal_string += '<div class="image-modal-caption">' + caption + '</div></div></div>';
         }
         else {
            image_modal_string += '</div></div>';
         }
         var $image_modal = $('<div/>').html(image_modal_string).contents();
         $.modal($image_modal, {
            closeHTML: "<a href='#' title='Close' role='button' aria-label='close' class='modal-close'></a>",
            position: ["10%","2%"],
            opacity: 85,
            //minWidth: $(window).width()-20,
            overlayId: 'modal-overlay',
            containerId: 'image-container',
            containerCss: {
              'maxHeight' : '95%',
              'overflow' : 'auto'
            },
            autoresize:true,
            focus:true,
            onOpen: function (dialog) {
                $('#page').attr('aria-hidden','true'); 
                $('#image-container').attr('role','DIALOG')
                                        .attr('aria-label','Image')
                                        .attr('tabindex','0')
                                        .focus();
                openImageModal(dialog);
                resizeImageModal();  
            },
            onShow: function(){
                lastFocus = document.activeElement;
                modalImageEvents();
            },
            onClose: function (dialog) {
                closeImageModal(dialog);
            }
       });
    }
    
    function modalImageEvents(location) {
       $( window ).resize(function() { 
           resizeImageModal();
        });
     }
     
    function openImageModal(dialog) {
        dialog.data.fadeIn('slow', function () {
                dialog.container.slideDown('slow', function () {
                        dialog.overlay.fadeIn('slow', function () {
                             dialog.data.slideDown('slow'); 
                        });
                });
        });
    }
    
    function resizeImageModal() {
            var screenWidth = $(window).width(),
                containerWidth = screenWidth-20,
                messageWidth='';
            switch(true){
                case (screenWidth<320):
                    messageWidth='150px';
                    break; 
                case (screenWidth<768):
                    messageWidth='300px';
                    break; 
                case (screenWidth<1024):
                    messageWidth='500px';
                    break; 
                default:
                    messageWidth='600px';
                    break;
            };

            $("#image-container").css('width', 'auto')
                                 .css('height','auto'); //To reset the container.
            $('.message').css('width', messageWidth);
            $(window).trigger('resize.simplemodal');
    }
    
   

    
$( document ).ready(function() {
 
    $('a.image-modal').click(function(event){
        event.preventDefault();
        var title = this.getAttribute('data-image-title'),
            uri = this.getAttribute('data-image-uri'),
            caption = this.getAttribute('data-image-caption'),
            photo_credit = this.getAttribute('data-image-photo-credit');
        createImageModal(event, title, uri, photo_credit, caption);
        });
    });

}(window, window.jQuery));