// Title: modal_queue.js
//  Conatins the ModalQueue class.
//
//  Original Author:
//      Michael Behan

// Class: ModalQueue
var ModalQueue = ( function () {
    // Can be modified via ModalQueue.config.option = value;
    var config = {
          modal_id_prefix: 'modal'
        , close_dom_id_prefix: 'btnCloseModal'
        , container_class: 'modal_container'
        , height: '350px'
        , width:  '600px'
        , fade_in_time: 500 // In ms
        , fade_out_time: 300 // In ms
        , mask_id: '#mask'
        , mask_opacity: 0.6 // 60%
        , show_publish: true // show Facebook publish button?
    };

    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Private Variables:
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    var queue = [];
    var i     = 0;
    var j     = 0;

    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Public Methods
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // Method: add
    //  Add content the modal queue
    //
    // Parameters:
    //      html   - Required. Markup for the modal being added
    //      width  - Optional. Width of modal in pixels.
    //      height - Optional. Height of modal in pixels.
    function add (html, width, height) {
        var domId  = config.modal_id_prefix + i.toString();
        var markup = '<div class="modal">'
                   + '    <div id="' + config.close_dom_id_prefix + i.toString() + '" class="close close_modal" onclick="ModalQueue.showNextModal();"></div>'
                   + '    <div class="wrapper">'
                   + '        <div id="modalContent" class="content">' +
                   +          html
                   + '        <a class="modal_fb_publish" href="#" onclick="TWOFace.publish();"><img src="/img/facebook/fb_publish.png" alt="Publish to Facebook" /></a></div><!-- end content -->'
                   + '    </div><!-- end wrapper -->'
                   + '</div><!-- end modal -->';

        // Create wrapper
        var el               = document.createElement('div');
            el.id            = domId;
            el.className     = config.container_class;
            el.innerHTML     = markup;
            el.style.display = 'none';
            $(el).css('height', (height !== null ? height: config.height));
            $(el).css('width',  (width !== null ? width: config.width));

        //get the height and width of the window, and modal
        var window_width  = $(window).width();
        var window_height = $(window).height();
        var modal_height  = parseInt($(el).css('height'), 10);
        var modal_width   = parseInt($(el).css('width'), 10);

       // alert(modal_width + 'x' + modal_height);

        //calculate top and left offset needed for centering
        var top  = (window_height-modal_height)/2;
        var left = (window_width-modal_width)/2;

        //apply new top and left css values
        $(el).css({'top' : top , 'left' : left});

        i += 1;

        // Add modal to the queue
        queue.push(el);
    }

    // Method: play
    //  Plays through the queue, showing each modal in the order it was  added.
    function play () {
        showMask();
        showNextModal();
    }
    // END public

    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Protectd Methods
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // Method: showNextModal
    //  Shows the next modal in the queue
    function showNextModal () {
        show_modal(j);
        showCloseButton(j);
        j++;
    }
    // END protected


   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   // Private Methods
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

   // Method: show_modal
   //   Shows a modal window from the queue.
   //
   // Parameters:
   //   num - Integer, index from the queue.
   function show_modal (num) {
        // Remove last modal from DOM
        if (num > 0) {
            $(queue[num-1]).fadeOut(config.fade_out_time);
            //$(queue[num-1]).remove();
        }

        var el = queue[num];

        // If no more elements, stop.
        if (el === undefined) {
            stop();
        }

        //show the modal window
        $(document.body).append(el);
        $(el).fadeIn(config.fade_in_time);

        return true;
   }

   // Method: showCloseButton
   //   Shows the close button. If we're on the first modal, the close
   //   button will animate with a drop/bounce.
   function showCloseButton (num) {
        // Animate the close button into view:
        if (num === 0) {
            $('#btnCloseModal' + num.toString()).animate({top: '-12px'}, 800);
            // Give it a little bounce:
            $('#btnCloseModal' + num.toString()).animate({top: '-17px'}, 100);
        } else {
            $('#btnCloseModal' + num.toString()).css('top', '-17px');
        }
    }

    // Method: showMask
    //  Shows the mask layer.
    function showMask () {
        var document_height = $(document).height();
        $(config.mask_id).css({'height': document_height}); // IE6 requires document height to fully expand the height of the scrollable area
        $(config.mask_id).css({'display': 'block', opacity : 0});
        $(config.mask_id).fadeTo(config.fade_in_time, config.mask_opacity);
    }

    // Method: hideMask
    //  Hides mask layer.
    function hideMask () {
        $(config.mask_id).hide();
    }

    // Method: stop
    //  Hides the mask layer and resets conters.
    function stop () {
      hideMask();
      i = j = 0; // reset counters incase we want to call play() again.
    }
    // END private


    // >>>
    // Expose public and protected methods and attributes:
    // >>>
    return {
          add: add
        , play: play
        , showNextModal: showNextModal
        , config: config
    };

}) ();


// Add some items to the queue and play them:
ModalQueue.add('<h1>Hello 1</h1>');
ModalQueue.add('<h1>Hello 2</h1>');
ModalQueue.add('<h1>Hello 3</h1>');
ModalQueue.play();