$(document).ready(function(){

    $("#movie-content-showtimes").jqm({
        modal: true,
        trigger:"a[href='#showtimes-trigger']",
        toTop: true,
        onShow: function(hash) {
            var tag = hash.t;
            var t_optionsId = $(tag).attr("optionsId");
            var t_hoverId = $(tag).attr("hoverId");
            // close the hover that opened this form
            $(".poster[rel='" + t_hoverId + "']").qtip("hide");   
            
            $("#showtimesFlyoutTitle").text($(tag).text());
            
            $("input[name='movieName']").val($("#movieTitle_" + $(tag).attr("movieId")).text());
            $("input[name='movieId']").val($(tag).attr("movieId"));
            $("select[name='showtimeDate']").children().remove();
            
            $("#showtimes_" + $(tag).attr("movieId") + " option").each(function(){
                $(this).clone(true).appendTo("select[name='showtimeDate']");
            });
            WPNI.Util.Utility.Modals.onShow(hash, false);

            // show the form
            $("#movie-content-showtimes").show();
        },
        onHide: function(hash) {
            var tag = hash.t;
            var t_hoverId = $(tag).attr("hoverId");
            hash.w.hide();
            hash.o.remove();
        }
    });//end modal

    $("div[id^='poster_']").each(function(){
        var contentId = $(this).attr("rel");
        var thisContent = $(contentId).clone(true);
        $(this).qtip({
           content: {
              text: $(thisContent).clone(true),
              title: false
           },
           show: { 
              solo: true,
              delay: 140,
              effect: { 
                    length: 10
                     }
          },
           hide: { 
              when: 'mouseout',
              fixed: true,
              delay: 500,
              effect: { 
                    length: 10
                     }
 
          },
          position: {
               corner: {
                   target: 'topLeft',
                   tooltip: 'topLeft'
               },
               adjust: { x: 40, 
                         y: 12,
                         screen: true 
               }

           },
          style: {
             width: 350,
             padding: 5,
             tip: false, // Give it a speech bubble tip
             border: {
                width: 5, 
                color: '#B2B2B2'
             },
             title: {
                color: '#fff'
             },
          name: 'moviePosters'
          },
          api: {
                  onRender: function() {
                      var self = this;
                      var thisShowtimesTrigger = jQuery(self.elements.content).find("a.showtimes-trigger");
                      jQuery(self.elements.content).find("a.showtimes-trigger").each(function(){
                        jQuery('#movie-content-showtimes').jqmAddTrigger(jQuery(this));
                      });  
                  }
                }
        });

    });



});

$.fn.qtip.styles.moviePosters = { // Last part is the name of the style

};