hotdamntv.js

/****************** loadevents.js ******************/
(function (g) {

    // set up this global object for the page UI to know what text
    // blurbs have been shown already (or not)
    g.tweens = {};

    // start preloading images right away
    var ga, // Google Analytics
        old_hash,
        div_mover,
        div_panels,
        div_container,
        fx_height,
        fx_mover,
        current_panel = 0,
        comment_cache = {},
        already_preloaded = [],
        latest_youtube_id = null,
        ajax_frag = g.location.href.split(/[\?\&\=\#]/).indexOf('_escaped_fragment_') >= 0,
        panel_names = ['#intro', '#faq', '#videos', '#contact', '#about', '#store', '#youtube', '#error'];

    function preload( )
    {
        var i, l, img = new g.Image( );
        
        for( i = 0, l = arguments.length; i < l; ++i )
        {
            if( already_preloaded.indexOf( arguments[ i ] ) < 0 )
            {
                img.src = arguments[ i ];
                already_preloaded.push( arguments[ i ] );
            }
        }
    }

    // for showing youtubes within hotdamtv
    function startYouTube( video_id )
    {
        latest_youtube_id = video_id;

        g.$( 'youtube_flash_content' ).innerHTML =
            '<object width="580" height="360">' +
            '<param name="movie" value="http://www.youtube.com/v/' + video_id + '&hl=en&fs=1&border=1"></param>' +
            '<param name="allowFullScreen" value="true"></param>' +
            '<param name="allowscriptaccess" value="always"></param>' +
            '<param name="Wmode" value="opaque"></param>' +
            '<embed src="http://www.youtube.com/v/' + video_id + '&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="580" height="360"></embed>' +
            '</object>';

        var yql_jsonp_node;

        if (comment_cache.hasOwnProperty(video_id)) {
            g.$( 'youtube_comments' ).innerHTML = comment_cache[video_id];
            // navigate to the video page
            g.location.hash = '#!youtube';
        }
        else {
            yql_jsonp_node = g.$('yql_jsonp_node');

            if (yql_jsonp_node) {
                yql_jsonp_node.parentNode.removeChild(yql_jsonp_node);
            }

            yql_jsonp_node = g.document.createElement('script');
            yql_jsonp_node.id = 'yql_jsonp_node';
            yql_jsonp_node.async = true;
            yql_jsonp_node.src = 'http://query.yahooapis.com/v1/public/yql?q=use%20\'http%3A%2F%2Fwww.datatables.org%2Fyoutube%2Fyoutube.video.comments.xml\'%3B%20select%20*%20from%20youtube.video.comments%20where%20id%3D\'' + video_id + '\'%3B&format=json&diagnostics=true&callback=yql_youtube_comments';
            g.document.body.appendChild(yql_jsonp_node);

            g.$( 'youtube_comments' ).innerHTML = '<img src="ajax_loading.gif" /> Loading comments...';
        }
    }

    // function called by interval set ondomready to slide window to the right content
    function moveToPanelByHash( override )
    {
        var new_hash = g.location.hash.replace('!', '');

        if( new_hash !== old_hash || true === override )
        {
            //window.console && console.log && console.log( 'is: ' + new_hash + ', used to be: ' + old_hash );

            // exiting video playback
            if( '#youtube' === old_hash )
            {
                g.$( 'youtube_flash_content' ).innerHTML = '';
                g.$( 'youtube_comments' ).innerHTML = '';
            }

            // if we clicked a normal link and went back to playing video accidentally
            if( '#youtube' === new_hash && !/#youtube(.+)/.test( old_hash ) )
            {
                //window.console && console.log && console.log( 'got in here, too' );
                g.history.back( );
                return;
            }

            // returning from video playback
            if( /^#youtube(.+)/.test( new_hash ) )
            {
                // new video
                if( '#youtube' !== old_hash )
                {
                    //window.console && console.log && console.log( 'found new video! history.length: ' + g.history.length );

                    if ( g.history.length <= 2 && g.history.pushState ) { g.history.pushState( new_hash ); }

                    // someone clicked to a video or started with it
                    startYouTube( new_hash.slice( 8 ) );
                }

                // deep link / return from playback
                else
                {
                    if ( g.history.length > 3 )
                    {
                        g.history.back( );
                    }
                    else
                    {
                        g.location.hash = '#videos';
                    }
                }
            }

            // try to find an existing panel
            if( panel_names.indexOf( new_hash ) >= 0 )
            {
                current_panel = panel_names.indexOf( new_hash );
                fx_mover.start( 'left', -( current_panel * div_container.offsetWidth ) + 'px' );
                fx_height.start( 'height', div_panels[ current_panel ].offsetHeight + 'px' );
                g.document.title = 'HotDamnTV - ' + panel_names[ current_panel ].substr(1).replace(/^(.)|\s(.)/g,function($1){return $1.toUpperCase();});
            }

            // TODO make this a queue
            old_hash = new_hash;
        }
    }

    function renderComments (comments) {
        var i, l, content = ['<table class="youtube_comments" cellspacing=0 cellpadding=0><tr><td colspan="2"><strong>YouTube Comments</strong></td></tr>'];
        for (i = 0, l = comments.length; i < l; ++i) {
            content.push('<tr' + (i % 2 ? ' class="alternate"' : '') + '>' +
                         '<th><a href="http://youtube.com/user/' + comments[i].author + '" target="_blank">' + comments[i].author + '</a></th>' +
                         '<td>' + comments[i].content + '</td>' +
                         '</tr>');
        }
        content.push('</table>');
        return content.join('');
    }

    // hit YQL w/JSONP to load all the comments from YouTube
    g.yql_youtube_comments = function (resp) {
        // helper variables
        var content,
            yql_jsonp_node = g.$('yql_jsonp_node'),
            youtube_id     = resp && resp.query && resp.query.diagnostics && resp.query.diagnostics.url && resp.query.diagnostics.url[1] && 'string' === typeof resp.query.diagnostics.url[1].content
                             ? (resp.query.diagnostics.url[1].content.match(/videos\/([^\/]+)\/comments/) || [0,null])[1]
                             : null;
        // check that we got results
        if (resp && resp.query && resp.query.results && resp.query.results.comment) {
            content = renderComments(resp.query.results.comment);
        }
        else {
            content = '<table class="youtube_comments" cellspacing=0 cellpadding=0><tr><td>There are no comments on this video</td></tr></table>';
        }
        // insert the rendered mark-up into the cache
        comment_cache[youtube_id] = content;
        // if we're still on the youtube page, redirect
        if (youtube_id === latest_youtube_id && /youtube(.+)/.test(g.location.hash.slice(1).replace('!',''))) {
            // show the comments
            g.$( 'youtube_comments' ).innerHTML = content;
            // navigate to the video page
            g.location.hash = '!youtube';
        }
        // remove the <script> node
        yql_jsonp_node.parentNode.removeChild(yql_jsonp_node);
    };

    // when dom is ready, do all this
    g.addEvent( "domready", function( )
    {
        var i, l, bits;

        // tell the body we have javascript
        g.document.body.className = 'js';

        // set the height of the main bar to 0 so we see a cool animation
        g.$( 'mainbar' ).style.height = '0px';

        if ( g.$( 'top_3_images' ) )
        {
            for( i = 0, l = g.top_3.length; i < l; ++i )
            {
                bits = g.top_3[i].split(':');
                g.$( 'top_3_images' ).innerHTML += '<div style="background: url(video_thumbs/' + bits[0] + '.jpg) top center; height: 6' + (2 === i ? '3' : '0') + 'px; width: 100px;"></div>';
                g.$( 'top_' + (i+1) + '_map' ).href = '#!youtube' + bits[0];
                g.$( 'top_' + (i+1) + '_map' ).title = bits[1];
            }
        }

        // preload crucial images
        preload( 'hotdamn_header.png', 'footer_bg3.jpg' );

        // scrape DOM
        div_mover = g.$( 'mover' );
        div_container = g.$( 'mainbar' );
        div_panels = g.$$( 'div.restrainer' );

        for( i = 0, l = div_panels.length; i < l; ++i )
        {
            div_panels[ i ].style.width = div_container.offsetWidth + 'px';
        }

        div_mover.style.width = ( 100 * div_panels.length ) + '%';

        // set up Fx objects
        fx_height = new g.Fx.Tween( div_container );
        fx_mover = new g.Fx.Tween( div_mover );
        
        // if we're an ajax fragment (i.e. Google is crawling /?_escaped_fragment=XXX), do certain things
        if (ajax_frag)
        {
            fx_mover.start( 'left', '0px' );
            fx_height.start( 'height', div_panels[0].offsetHeight + 'px' );
        }
        // otherwise do other things
        else
        {
            // start at first panel
            if( '#youtube' === g.location.hash.replace('!','') || '' === g.location.hash.slice( 1 ) ){ g.location.hash = '#!intro'; }
            
            // load window according to hash (if one exists), otherwise force "#!intro".  also, keep checking for changes
            moveToPanelByHash( );
            g.setInterval( moveToPanelByHash, 200 );
        }

        if ( g.$( 'contact_form' ) )
        {
            // contact form bindings
            g.$( 'contact_form' ).addEvent( 'submit', function( e )
            {
                e.preventDefault( );
                new g.Request(
                {
                    'url'       : 'contact_ajax.php',
                    'method'    : 'POST',
                    'data'      : 'email='+g.encodeURI(this.email.value)+'&name='+g.encodeURI(this.name.value)+'&message='+g.encodeURI(this.message.value),
                    'onSuccess' : function( data ){ g.$( 'response' ).innerHTML = data; }
                } ).send( );
            } );

            g.$( 'email' ).onfocus = function() { if(this.value==='Your email'){ this.value=''; } };
            g.$( 'email' ).onblur = function() { if(this.value===''){ this.value='Your email'; } };

            g.$( 'name' ).onfocus = function() { if(this.value==='Your name'){ this.value=''; } };
            g.$( 'name' ).onblur = function() { if(this.value===''){ this.value='Your name'; } };

            g.$( 'message' ).onfocus = function() { if(this.value==='Your message to me...'){ this.value=''; } };
            g.$( 'message' ).onblur = function() { if(this.value===''){ this.value='Your message to me...'; } };
        }

        // make external links go to new windows
        g.$$('a[href*="://"][rel!="sameframe"], area[href*="://"][rel!="sameframe"]').set('target','_blank');
        
        if (g.$('newshit'))
        {
            // get the ID of the newest video
            g.$('newshit').set('href', g.$$('span.video a').get('href')[0]);
        }
            
        // slimbox domready stuff
        g.$$('a[rel^="lightbox"]').slimbox();

        // preload more images
        preload( 'top_rollover_bg3.jpg', 'ajax_loading.gif', 'loading.gif', 'closelabel.gif', 'nextlabel.gif' ); // load non-visible images
    } );

    // set up super-gay unicorn flip
    g.document.onKonami = function( )
    {
        g.document.body.style.background='url(unicorn.jpg)';
        g.location.hash = '#!youtubevHRuKGgdKSY';
    };

    // YQL JSONP callback to scrape CafePress
    g.yql_cafe_press = function (resp) {
        var i, l, yql_cafe_press, content = [], results;
        if (resp && resp.query && resp.query.results) {
            for (results = resp.query.results, i = 0, l = results.p.length; i < l; ++i) {
                content.push('<div class="store-item"><a style="-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;" href="' + results.a[i].href + '" title="' + results.a[i].content + '" target="_blank"><img src="' + results.img[i].src + '" /><br />' + results.a[i].content + ' (' + results.p[i] + ')</a></div>');
            }
            g.$( 'store_content' ).innerHTML = content.join('');
            // only run moveToPanelByHash() if we're already viewing the store
            if ('store' === g.location.hash.slice(1).replace('!', '')) {
                moveToPanelByHash( true );
            }
        }
        else {
            g.$( 'store_content' ).innerHTML = 'YQL or CafePress are having difficulties right now, :(.  Try going there <a href="http://www.cafepress.com/hotdamntv">directly</a> instead.';
        }
        yql_cafe_press = g.$('yql_cafe_press');
        yql_cafe_press.parentNode.removeChild(yql_cafe_press);
    };

    g.addEvent('domready', function () {
        if ( g.$( 'store_content' ) ) {
            var script = g.document.createElement('script');
            script.id  = 'yql_cafe_press';
            script.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20src%2C%20href%2C%20content%20from%20html%20where%20url%3D\'http%3A%2F%2Fwww.cafepress.com%2Fhotdamntv\'%20and%20xpath%3D\'%2F%2Ful%5B%40class%3D%22products%22%5D%2Fli%2Fa%2Fimg%7C%2F%2Ful%5B%40class%3D%22products%22%5D%2Fli%2Fa%5Bnot(contains(%40class%2C%20%22productImageLink%22))%5D%7C%2F%2Ful%5B%40class%3D%22products%22%5D%2Fli%2Fp\'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=yql_cafe_press';
            g.document.body.appendChild(script);
        }
    });

    // Google Analytics (slightly modified)
    g.addEvent('domready', function () {
        // push operations into async queue
        g._gaq = g._gaq || [];
        g._gaq.push(['_setAccount', 'UA-21879968-1']);
        g._gaq.push(['_trackPageview']);
        // asynchronously load remote Google Analytics js
        ga = g.document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' === g.document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        g.document.body.appendChild(ga);
    });

}(this));