var TRAILER_CODE = '<div class="frame"><object width="640" height="505">' +
              '<param name="movie" value="http://www.youtube.com/v/{{code}}&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999&autoplay=1&fs=1">' +
              '<param name="allowFullScreen" value="true">' +
              '<param name="allowscriptaccess" value="always">' +
              '<embed src="http://www.youtube.com/v/{{code}}&hl=en_US&fs=1&color1=0x3a3a3a&color2=0x999999&autoplay=1&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505">' +
          '</object></div>';

function createTrailerFrame(code)
{
    var self = $('<div id="TrailerFrame" class="modal"/>')
                        .appendTo(document.body);
    self.screen = $('<div class="screen"/>')
                        .appendTo(self)
                        .css('opacity', .7);
    
    self.frame = $(TRAILER_CODE.replace(/{{code}}/gi, code))
                        .appendTo(self);
    
    self.close = $('<div class="close">')
        .appendTo(self.frame)
        .click(function() { window.trailer = null; self.remove() });
    
    self.show();
    
    function resize()
    {
        self.frame.css('top', self.height() / 8);
        self.frame.css('left', (self.width() / 2) - (self.frame.width() / 2));
    }
    
    resize();
    $(window).resize(resize);
    $(window).scroll(resize);
    
    window.trailer = self;
}

$(function()
{
    function setupTrailer()
    {
        var parts = $(this).attr('href').match(/v=([^&]*)/);
        if (parts.length != 2) return;
        
        $(this).click(function() {
            createTrailerFrame(parts[1]);
            return false;
        })
    }
    
    $('a.trailer').each(setupTrailer);
});