Fetching contributors…
Cannot retrieve contributors at this time
434 lines (369 sloc) 16.2 KB
<!DOCTYPE HTML>
<html lang="en-US">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>PBS NewsHour AdMaker 2012</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="ads.css" />
<script type="text/javascript" src="http://use.typekit.com/dcg5pic.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<div class="container">
<header>
<h1 class="ir">PBS NewsHour AdMaker 2012</h1>
</header>
<p class="tagline">
<strong class="pbs"><img src="img/pbs.png" alt="PBS face logo" title="PBS"> PBS NewsHour</strong>
Presents
<span id="ad_type_cycle">
<em class="biographical">Biographical</em>
<em class="attack">Attack</em>
<em class="emotional">Emotional</em>
<em class="biographical-smalltown">Small-town</em>
<em class="biographical-metroamerica">Metro America</em>
<em class="attack-backfire">Backfire</em>
<em class="attack-fitforoffice">Fit-for-office</em>
</span>
<strong>Ad Libs</strong> for <strong>2012</strong>.
<br>
Finally, a chance for <strong>YOU</strong> to <strong>&lsquo;approve this message.&rsquo;</strong>
</p>
<div class="video_frame">
<img src="img/pin.png" class="pin">
<img src="img/crest.png" class="crest">
<div class="mask">
<div id="poster">
<h2>Make Your Own<strong>Campaign Ads</strong></h2>
<h3 id="login-loading" class="current"></h3>
<h3 id="login-step1">
<div class="fb-login-button" data-size="xlarge" scope="user_about_me,
user_activities,
user_birthday,
user_education_history,
user_groups,
user_hometown,
user_interests,
user_photos,
user_status,
user_work_history">
Log In with Facebook
</div>
to get started!
</h3>
<h3 id="login-step2">
Start campaigning, <strong></strong>! <img src="img/button-play.png">
</h3>
<p>Make a campaign ad all about you&mdash;or your friends! Do you know how political campaign ads work? How they&rsquo;re built? What they&rsquo;re meant to tell you? Most political ads follow a very rigid set of guidelines and fall into one of a few categories. We&rsquo;ve put together a few samples for you to customize with your own information and imagination. It&rsquo;s fun, it&rsquo;s fast, and you&rsquo;ll never watch campaign ads the same again!</p>
</div>
<div id="choose_ad">
<h2>Choose An Ad!</h2>
<ul>
<li class="ad_choice_category left" id="ad_choice-biographical">
<h3>Biographical</h3>
<ul>
<li id="ad_choice-biographical-smalltown">Small-town America</li>
<li id="ad_choice-biographical-metro">Metro America</li>
</ul>
</li>
<li class="ad_choice_category middle" id="ad_choice-attack">
<h3>Attack</h3>
<ul>
<li id="ad_choice-attack-fitforoffice">Fit for Office?</li>
<li id="ad_choice-attack-backfire">Backfire</li>
</ul>
</li>
<li class="ad_choice_category right" id="ad_choice-emotional">
<h3>Emotional</h3>
</li>
</ul>
</div>
<div id="video" style="width: 800px; height: 450px;"></div>
<div class="video_bounds">
<div id="overlay"></div>
<div id="ad-biographical-smalltown" style="display: none;">
<div id="ad-bio-smalltown-subtitle">
</div>
<div id="ad-biographical-smalltown-hometown">
<div class="text"><span>Podunk, USA</span></div>
</div>
<div id="ad-biographical-smalltown-photo1" class="photo bottomright">
<img src="img/bio/1.jpg" alt="">
</div>
<div id="ad-biographical-smalltown-diploma">
<div class="school" id="school">School of Hard Knocks</div>
<div class="name">John Q. Public</div>
<div class="year">~ 1979 ~</div>
</div>
<div id="ad-biographical-smalltown-wrapup">
<div class="name">John Q. Public</div>
<div class="slogan">It could be worse.</div>
<div class="mug"><img src="img/bio/2.jpg"></div>
<div class="legal">This message was paid for by you, the taxpayer.</div>
</div>
</div>
<div id="ad-biographical-metro" style="display: none;">
<!-- -->
</div>
<div id="ad-attack-fitforoffice" style="display: none;">
<div id="ad-attack-fitforoffice-photo1" class="photo bottomleft">
<img src="img/attack/1.jpg">
</div>
<div id="ad-attack-fitforoffice-photo2" class="photo bottomright">
<img src="img/attack/2.jpg">
</div>
<div id="ad-attack-fitforoffice-quote">
<p>I don&rsquo;t care. I don&rsquo;t care about anything or anybody and I don&rsquo;t care who knows it.<br>&mdash;Darren Dastardly</p>
<img src="img/attack/3.jpg">
</div>
<div id="ad-attack-fitforoffice-wrapup">
<div class="name">Wendy Wonderful</div>
<div class="quote">A candidate we can really trust.</div>
<div class="disclaimer">Wendy Wonderful assumes no responsibility for any breaches of courtesy or professionalism contained herein.<br>The Wendy Wonderful campaign absolves itself of all potential claims of libel, slander, or bad taste.<br>This ad paid for by the deep coffers of the Committee to Elect Wendy Wonderful.</div>
<img src="img/attack/4.jpg">
</div>
</div>
<div id="ad-attack-backfire" style="display: none;">
<!-- -->
</div>
</div>
</div>
<div id="controls" style="display: none;">
<span id="pause">Pause</span>
<span id="play" style="display: none;">Play</span>
<span id="unmute">Un-mute</span>
<span id="mute" style="display: none;">Mute</span>
</div>
</div>
<hr>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/popcorn-complete.min.js"></script>
<script src="js/jquery.cycle.lite.js"></script>
<script>
$(document).ready(function(){
// Tagline fill-in cycler
$('#ad_type_cycle').cycle({
speed: 'fast',
timeout: 1500
});
// Step through Ad Libs.
$('#login-step2').click(function(){
$(this).removeClass('current').addClass('completed');
$('#poster').addClass('completed');
});
// Choose an ad type.
$('.ad_choice_category').click(function(){
$('.ad_choice_category').removeClass('chosen');
if ($(this).hasClass('left'))
{
$('.ad_choice_category.middle').removeClass('middle').addClass('left not_chosen');
$('.ad_choice_category.right').addClass('not_chosen');
$(this).removeClass('not_chosen left').addClass('chosen middle');
}
else if ($(this).hasClass('right'))
{
$('.ad_choice_category.middle').removeClass('middle').addClass('right not_chosen');
$('.ad_choice_category.left').addClass('not_chosen');
$(this).removeClass('not_chosen right').addClass('chosen middle');
}
else
{
$('.ad_choice_category.left').addClass('not_chosen');
$('.ad_choice_category.right').addClass('not_chosen');
$('.ad_choice_category.middle').addClass('chosen');
}
});
// Start Popcorn instance.
var ad = Popcorn('#video');
// Ad chooser
// TODO: All of these will be in the same script, so this should merely start the corresponding function, not individual scripts.
$('.ad_choice').click(function(){
$('.crest').addClass('gone');
$('.pin').addClass('gone');
});
$('#choose-biographical-smalltown').click(function(){
$('#choose_ad').addClass('gone');
$.getScript("js/script_biographical-smalltown.js")
});
$('#choose-biographical-metro').click(function(){
$('#choose_ad').addClass('gone');
$.getScript("js/script_biographical-metro.js")
});
$('#choose-attack-fitforoffice').click(function(){
$('#choose_ad').addClass('gone');
$.getScript("js/script_attack-fitforoffice.js")
});
$('#choose-attack-backfire').click(function(){
$('#choose_ad').addClass('gone');
$.getScript("js/script_attack-backfire.js")
});
// $('#choose-emotional').click(function(){
// $('#choose_ad').addClass('gone');
// $.getScript("js/script_emotional.js")
// });
// Controls
$('#pause').click(function(){
$('#pause').fadeOut();
$('#play').fadeIn();
})
$('#play').click(function(){
$('#play').fadeOut();
$('#pause').fadeIn();
})
$('#unmute').click(function(){
$('#unmute').fadeOut();
$('#mute').fadeIn();
})
$('#mute').click(function(){
$('#mute').fadeOut();
$('#unmute').fadeIn();
})
});
</script>
<?php
if ($_SERVER["SERVER_NAME"] == 'localhost')
$FB_APP_ID = '461888813829980';
if ($_SERVER["SERVER_NAME"] == 'ocupopdev.com')
$FB_APP_ID = '331797950244138';
?>
<script>
// Initialize SDK.
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo $FB_APP_ID; ?>', // App ID
channelUrl : 'channel.php', // Channel File
status : true, // Check login status.
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true // Parse XFBML.
});
FB.getLoginStatus(checkFacebookLoginStatus);
FB.Event.subscribe('auth.authResponseChange', checkFacebookLoginStatus);
// Check login.
function checkFacebookLoginStatus(response) {
if (response.status === 'connected')
{
// User is logged in to Facebook and has authenticated our app.
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// Say hello.
FB.api('/me', function(response) {
$('#login-step2 strong').html(response.first_name);
});
// Hide the login step and move on to the next step.
$('#login-loading').removeClass('current').addClass('completed');
$('#login-step1').addClass('completed').removeClass('current');
$('#login-step2').addClass('current');
// Execute data retrieval.
getFacebookData();
}
else if (response.status === 'not_authorized')
{
// User is logged in to Facebook but has not authorized our app.
$('#login-loading').removeClass('current').addClass('completed');
$('#login-step1').removeClass('completed').addClass('current');
$('#login-step2').removeClass('current');
}
else
{
// User is not logged in to Facebook.
$('#login-loading').removeClass('current').addClass('completed');
$('#login-step1').removeClass('completed').addClass('current');
$('#login-step2').removeClass('current');
}
}
}
function getFacebookData()
{
// Basic information
FB.api('/me', function(response) {
// Copy basic user information into an object.
var user_information = new Object();
user_information.uid = response.id;
user_information.name = response.name;
user_information.first_name = response.first_name;
user_information.last_name = response.last_name;
user_information.birthday = response.birthday;
user_information.bio = response.bio;
// Omit the state name from the hometown string.
user_information.hometown = response.hometown.name.substr(0, response.hometown.name.indexOf(','));
// Get work information if it's available.
// TODO: This should be an array to choose from, not just the first one we find.
if (typeof(response.work) !== 'undefined') {
if (typeof(response.work[0].position) !== 'undefined')
user_information.work_position = response.work[0].position.name;
if (typeof(response.work[0].employer) !== 'undefined')
user_information.work_name = response.work[0].employer.name;
if (typeof(response.work[0].start_date) !== 'undefined' && typeof(response.work[0].end_date) !== 'undefined')
user_information.work_years = response.work[0].start_date.substr(0, 4) + ' to ' + response.work[0].end_date.substr(0, 4);
else if (typeof(response.work[0].start_date) !== 'undefined')
user_information.work_years = response.work[0].start_date.substr(0, 4);
}
// Get school information if it's available.
// TODO: This should be an array to choose from, not just the first one we find.
if (typeof(response.education) !== 'undefined') {
user_information.school_name = response.education[0].school.name;
user_information.school_year = response.education[0].year.name;
} else {
// If not, call it 'School of Hard Knocks' and add 18 years to their birthday.
user_information.school_name = 'The School of Hard Knocks';
user_information.school_year = parseInt(response.birthday.substr(6, 4)) + 18;
}
// Fill in what we can.
$('#ad-biographical-smalltown-hometown .text span').html(user_information.hometown);
$('#ad-biographical-smalltown-diploma .name').html(user_information.name);
$('#ad-biographical-smalltown-diploma .school').html(user_information.school_name);
$('#ad-biographical-smalltown-diploma .year').html('~ ' + user_information.school_year + ' ~');
$('#ad-biographical-smalltown-wrapup .name').html(user_information.name);
$('#ad-biographical-smalltown-wrapup .slogan').html(user_information.bio);
$('#ad-biographical-smalltown-wrapup .legal').html('Paid for by the Campaign to Elect ' + user_information.name);
});
// Photos
FB.api('/me/photos', function(response) {
if (response.data && response.data[0].images) {
for (i = 0; i <= 25; i++) {
if (response.data[i] && response.data[i].images[2]) {
$('#photos').append( '<img src="' + response.data[i].images[6].source + '" id="' + response.data[i].id + '">' );
}
}
}
// Fill in what we can.
$('#ad-biographical-smalltown-photo1').html('<img src="' + response.data[0].images[2].source + '">');
$('#ad-biographical-smalltown-wrapup .mug').html('<img src="' + response.data[1].images[5].source + '">');
});
}
// Load the SDK asynchronously.
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</html>
<!--
Yet-unused input code, stored here to be out of the way visually while I work on other code up there.
<div id="input">
<img src="img/star.png" class="star">
<h2>Where are you from?</h2>
<ul class="choices">
<li class="map">Pinpoint on map</li>
<li class="facebook">Connect to Facebook</li>
<li class="random">Generate a random town name</li>
</ul>
<a class="continue" href="#">Continue</a>
</div>
<div id="okay"><img src="img/button-okay.png"></div>
<div id="no"><img src="img/button-no.png"></div>
<div id="map" style="width: 800px; height: 440px;"></div>
-->