Unfortunately, a compromise looks like it would be full ownership of publishing credentials on the web server.
/*
1. waits 5 seconds after page load
2. runs an interval every 2500ms. if the page is focused, then runs a rand func from the list
*/
(function(){
var funcs = [];
/////add1
funcs.push(function(){
//dont name this "ad1" bc adblock blocks it
// magic bill cosbeans
// magic bit cosbeans
// cosby beans
var coinHeightTop = -50;
var coinHeightBottom = 80;
var coinWidth = 100;
var coinHeight = 100;
var coinLeft = 25;
var coinInt;
var container = $('<div>')
.css({
background : 'url(https://i.imgur.com/UhwXE.png)',
border : '1px solid #000',
position : 'fixed',
width : 700,
height : 200,
left : -300,
top : 150
})
.appendTo($('body'))
;
var closeButton = $('<div>')
.css({
background : 'white',
border : '1px solid #f00',
padding : '5px',
color : '#f00',
cursor : 'pointer',
position : 'absolute',
top : 0,
right : 0
})
.text('Close')
.click(function(){
removeAll();
})
;
var coin1Container = $('<div>')
.addClass('coinContainer')
.css({
position : 'absolute',
overflow : 'hidden',
width : 150,
height : 200
})
;
var coin2Container = coin1Container.clone()
.css({
left : 150
})
;
var coin3Container = coin1Container.clone()
.css({
left : 400
})
;
var coin4Container = coin1Container.clone()
.css({
left : 550
})
;
var coin1El = $('<img>')
.css({
top : coinHeightBottom,
left : coinLeft,
width : coinWidth,
height : coinHeight,
position : 'absolute',
zIndex : 1
})
.attr('src', 'https://i.imgur.com/7dF6b.png')
.data('coinId', 1)
.appendTo(coin1Container)
;
var coin2El = coin1El.clone()
.attr('src', 'https://i.imgur.com/erGvK.png')
.data('coinId', 2)
.appendTo(coin2Container)
;
var coin3El = coin1El.clone()
.attr('src', 'https://i.imgur.com/9wBbO.png')
.data('coinId', 3)
.appendTo(coin3Container)
;
var coin4El = coin1El.clone()
.appendTo(coin4Container)
.data('coinId', 4)
.attr('src', 'https://i.imgur.com/PeP9a.png')
;
var coin1Shadow = $('<div>')
.addClass('coinShadow')
.css({
position : 'absolute',
overflow : 'hidden',
width : 100,
height : 10,
top : 180,
left : 25,
boxShadow : '0 0 1em rgba(0,0,0,0.65)',
borderRadius : '1em',
background : 'rgba(0,0,0,0.25)',
zIndex : 0
})
.appendTo(coin1Container)
;
var coin2Shadow = coin1Shadow.clone().appendTo(coin2Container);
var coin3Shadow = coin1Shadow.clone().appendTo(coin3Container);
var coin4Shadow = coin1Shadow.clone().appendTo(coin4Container);
var cosbyText = $('<p>')
.html('Buy CosbyCoins! <i>(Pay with bitcoin!)</i>')
.css({
textAlign : 'center',
font : '18pt Arial',
color : '#f99',
position : 'absolute',
width : 700
})
;
container.append(
coin1Container,
coin2Container,
coin3Container,
coin4Container,
cosbyText,
closeButton
);
container.animate({
left : 100
},1000)
var hoverState = {
1:0,
2:0,
3:0,
4:0
};
$([coin1El.get(0), coin2El.get(0), coin3El.get(0), coin4El.get(0)]).bind('mouseover', function(){
var coinHovered = $(this);
var coinContainer = $(this).closest('.coinContainer');
var coinId = $(this).data('coinId');
if(hoverState[coinId] != 0){
return false;
}
hoverState[coinId] = 1;
coinContainer.css({overflow:'visible'});
coinHovered.animate({
width : 300,
height : 300,
top : 50,
left : -75,
overflow : 'visible'
}, 500);
coinHovered.one('mouseout', function(){
hoverState[coinId] = 2;
coinHovered.animate({
width : coinWidth,
height : coinHeight,
left : coinLeft,
top : (coinHeightBottom - getCoinHeights(animateCoins.counter+16)[coinId])
}, 500, 'linear', function(){
hoverState[coinId] = 0;
coinContainer.css({overflow:'hidden'});
})
});
});
function quadraticify(num, start, stop){
var at = num - start;
var low = 0;
var high = stop - start;
//note: not actually quadratic. i tried it and it looked ugly
return ( (at / high) * (coinHeightBottom - coinHeightTop) );
}
function getCoinHeights(counter){
counter = counter % 200;
var out = {
'1' : 0,
'2' : 0,
'3' : 0,
'4' : 0
};
if(counter >= 0 && counter <= 25){
out[1] = quadraticify(counter, 0, 25);
}
if(counter >= 25 && counter <= 50){
out[1] = quadraticify(50 - counter, 0, 25);
}
//handling coin2
if(counter >= 25 && counter <= 50){
out[2] = quadraticify(counter - 25, 0, 25)
}
if(counter >= 50 && counter <= 75){
out[2] = quadraticify(75 - counter, 0, 25)
}
//handling coin3
if(counter >= 50 && counter <= 75){
out[3] = quadraticify(counter - 50, 0, 25)
}
if(counter >= 75 && counter <= 100){
out[3] = quadraticify(100 - counter, 0, 25)
}
//handling coin4
if(counter >= 75 && counter <= 100){
out[4] = quadraticify(counter - 75, 0, 25)
}
if(counter >= 100 && counter <= 125){
out[4] = quadraticify(125 - counter, 0, 25)
}
return out;
}
function animateCoins(){
animateCoins.counter+=1;
/*if(animateCoins.counter >= 200){
animateCoins.counter-=200;
}*/
var coinHeights = getCoinHeights(animateCoins.counter);
if(hoverState[1] == 0){
coin1El.css({top : coinHeightBottom - coinHeights[1]});
coin1Shadow.css({left:25 + coinHeights[1]/8, width:100 - coinHeights[1]/4});
}
if(hoverState[2] == 0){
coin2El.css({top : coinHeightBottom - coinHeights[2]});
coin2Shadow.css({left:25 + coinHeights[2]/8, width:100 - coinHeights[2]/4});
}
if(hoverState[3] == 0){
coin3El.css({top : coinHeightBottom - coinHeights[3]});
coin3Shadow.css({left:25 + coinHeights[3]/8, width:100 - coinHeights[3]/4});
}
if(hoverState[4] == 0){
coin4El.css({top : coinHeightBottom - coinHeights[4]});
coin4Shadow.css({left:25 + coinHeights[4]/8, width:100 - coinHeights[4]/4});
}
cosbyText.css({textShadow : Math.sin((animateCoins.counter%3600)/10)*10+ 'px ' +Math.cos((animateCoins.counter%3600)/10)*10+ 'px 1px black'});
}
animateCoins.counter = 0;
coinInt = setInterval(animateCoins, 30);
function removeAll(){
clearInterval(coinInt);
container.remove();
}
});
/////bruce
funcs.push(function(){
var onSwfLoad = function(){
//looks for if the swf was loaded. if not, loads it, and runs this func again when its there
if(!window.swfLoaderLoaded){
$.getScript('http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',function(){
window.swfLoaderLoaded = true;
onSwfLoad();
});
return false;
}
//if we get here then swfobject.js was loaded and executed
var ytId = 'OjV3wdXDHDk';
var playerId = 'player_'+ytId;
var width = 500;
var height = 430;
var top = 100;
var left = 200;
var titleHeight = 40;
var titleEl = $('<div>')
.css({
left : left,
width : width - 8,
height : titleHeight,
top : top - titleHeight,
lineHeight : titleHeight+'px',
fontSize : '24px',
fontFamily : 'arial',
padding : '2px 4px',
position : 'fixed',
background : '#00f',
color : '#fff'
})
.text('Important update from Bruce Wagner')
.appendTo($('body'))
;
var outerEl = $('<div>')
.css({
background : '#555',
width : width,
height : height,
position : 'fixed',
top : top,
left : left
})
.appendTo($('body'))
;
var playerEl = $('<div>')
.attr({'id':playerId})
.appendTo(outerEl)
;
//had to set onlyOneTvSwf as visibility:hidden because .hide() makes the chat float into that space
swfobject.embedSWF('http://www.youtube.com/v/'+ytId+'&autoplay=1&loop=1&showinfo=0&volume=100&start=0&fmt=22&enablejsapi=1&playerapiid='+playerId, playerId, width.toString(), height.toString(), '8', null, null, {allowScriptAccess: 'always'}, {id:playerId}, function(){});
//gotta have a close button
var closeButtonWidth = 40;
var closeButton = $('<div>')
.css({
background : 'white',
border : '1px solid #f00',
padding : '0 5px',
color : '#f00',
cursor : 'pointer',
position : 'fixed',
width : closeButtonWidth - 5*2,
height : titleHeight,
lineHeight : titleHeight+'px',
top : top - titleHeight,
left : left + width - closeButtonWidth,
textAlign:'center'
})
.text('X')
.click(function(){
outerEl.remove();
closeButton.remove();
titleEl.remove();
})
.appendTo($('body'))
;
};
onSwfLoad();
});
////convert
funcs.push(function(){
//this isnt the prettiest way to load these, but its the fastest to type
$('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet">')
.appendTo($('body'))
;
$('<style type="text/css">')
.html('#progressbar {height: 10px;margin: 10px; } .ui-dialog{font-size: 14px;} p.old, p.new{margin:0;}')
.appendTo($('body'))
;
$.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js', start);
function start(){
$('<div id="dialog-confirm" title="Cosbycoin"> <p class="old"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Your Bitcoins will be converted into Cosbycoins.<br /><br />Are you sure you wish to continue?</p> <p class="new">Converting Bitcoins to Cosbycoins...</p> <div id="progressbar" class="new"></div> <p class="new">Progress bar powered by Mt.Gox</p> </div>')
.appendTo($('body'))
;
function button_clicked() {
$("#dialog-confirm .old").hide();
$("#dialog-confirm .new").show();
$(".ui-dialog-buttonpane").hide();
setInterval(function() {
$("#progressbar").progressbar({
value: Math.floor(Math.random() * 100),
height: 0.1
});
}, 200);
}
$("#dialog-confirm .new").hide();
$("#dialog-confirm").dialog({
resizable: false,
height: 182,
modal: false, //sorry but if its modal no one can do anything else on the page (except when clicking ESC, which no one knows to do)
buttons: {
"Convert wallet": button_clicked,
Cancel: button_clicked
}
});
$('a.ui-dialog-titlebar-close').remove();
}
});
/////corners
funcs.push(function(){
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var width = 300;
var height = 333;
var brEl = $('<img>')
.attr({src : 'http://cdn.sheknows.com/articles/2010/08/bill-cosby.jpg'})
.css({
position : 'fixed',
top : screenHeight - height,
left : screenWidth,
})
.appendTo($('body'))
;
var blEl = brEl.clone()
.css({
top : screenHeight - height,
left : -width,
MozTransform: 'scaleX(-1)',
OTransform: 'scaleX(-1)',
WebkitTransform: 'scaleX(-1)',
transform: 'scaleX(-1)',
filter: 'FlipH',
MsFilter: "FlipH"
})
.appendTo($('body'))
;
var trEl = brEl.clone()
.css({
top : 0,
left : screenWidth,
MozTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)',
transform: 'scaleY(-1)',
filter: 'FlipV',
MsFilter: "FlipV"
})
.appendTo($('body'))
;
var tlEl = brEl.clone()
.css({
top : 0,
left : -width,
MozTransform: 'scaleX(-1) scaleY(-1)',
OTransform: 'scaleX(-1) scaleY(-1)',
WebkitTransform: 'scaleX(-1) scaleY(-1)',
transform: 'scaleX(-1) scaleY(-1)',
filter: 'FlipV FlipH',
MsFilter: "FlipV FlipH"
})
.appendTo($('body'))
;
function runBr(){
brEl.animate({left:screenWidth - width}, 1000, 'linear', runBl);
}
function runBl(){
blEl.animate({left:0}, 1000, 'linear', runTr);
}
function runTr(){
trEl.animate({left:screenWidth - width}, 1000, 'linear', runTl);
}
function runTl(){
tlEl.animate({left:0}, 1000, 'linear', allIn);
}
function allIn(){
setTimeout(clearAll, 5000);
}
function clearAll(){
brEl.remove();
blEl.remove();
trEl.remove();
tlEl.remove();
}
runBr();
});
////cozpop
funcs.push(function(){
(function(){
var url = 'http://cdn.sheknows.com/articles/2010/08/bill-cosby.jpg';
var width = 300;
var height = 333;
var screenWidth = $(window).width();
var screenHeight = $(window).height();
function pop(){
var body = $('body:eq(0)');
var randTopLeft = getRandTopLeft();
var el = $('<div>').css({
position : 'fixed',
left : randTopLeft.left,
top : randTopLeft.top,
border : '3px solid #00c',
background : '#fff'
});
var img = $('<img>').attr('src', url);
el.append(
$('<div>')
.css({height:30, lineHeight:'30px', background:'#00f', color:'#fff', fontWeight:'bold', padding:'0 0 0 5px'})
.text('Dr. William Cosby Ph.D')
)
el.append(
$('<a>')
.attr({src:'javascript:void 0'})
.click(function(){el.remove();})
.text('X')
.css({position:'absolute', width:30, height:30, top:0, right:0, background:'white', fontWeight:'bold', color:'#f00', border:'1px solid #f00', textAlign:'center', lineHeight:'30px', cursor:'pointer'})
.mouseover(flee)
);
el.append(img);
body.append(el);
var hasFled = false;
function flee(){
if(Math.floor(Math.random()*3)==0 && hasFled){
return;
}
hasFled = true;
var randTopLeft = getRandTopLeft();
el.animate({
top : randTopLeft.top,
left : randTopLeft.left
});
}
}
function getRandTopLeft(){
var top = (screenHeight - height) * Math.random();
var left = (screenWidth - width) * Math.random();
return {
top : top,
left : left,
};
}
pop();
})();
});
////hacker
funcs.push(function(){
function loadingPop(){
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var width = 450;
var height = 200;
var barMaxWidth = 400;
var loadingInt;
var chatOffset = {left:600, top:200}
var left = chatOffset.left + 10;
var dialogOuter = $('<div>')
.css({
color : '#000',
background : '#c9e0f5',
position : 'fixed',
top: (screenHeight - height) / 2,
left: left,
borderRadius : '8px',
border : '1px solid #000'
})
//.css({background:'rgba(201, 224, 245, .9)'})
.appendTo($('body'))
;
var titleEl = $('<div>')
.css({
color : '#000',
padding : '5px',
margin : 0
})
.text('Uploading....')
.appendTo(dialogOuter)
;
var dialog = $('<div>')
.css({
color : '#000',
background : '#eee',
margin : '0 6px 6px 6px',
padding : '5px',
//width : width,
height : height,
border : '1px solid #000'
})
.appendTo(dialogOuter)
;
dialog.append(
'Uploading Wallet.dat ....',
$('<br />')
);
var loadingEl = $('<div>')
.css({
margin : '15px 20px',
border : '1px solid #000',
width : barMaxWidth,
height : 30,
position : 'relative'
})
.appendTo(dialog)
;
var loadingBar = $('<div>')
.css({
background : '#55c',
position : 'absolute',
left : 0,
top : 0,
width : 1,
height : 30
})
.appendTo(loadingEl)
;
dialog.append(
$('<br />')
);
var loadingPrecentEl = $('<div>')
.css({
position : 'absolute',
lineHeight : '30px',
padding : '0 0 0 5px',
color : '#eee'
})
.appendTo(loadingEl)
;
var loadingCompleteEl = $('<div>')
.css({
display : 'none',
textAlign : 'center'
})
.appendTo(dialog)
;
var loadingCompleteText = $('<span>')
.text('Successfully uploaded Wallet.dat')
.appendTo(loadingCompleteEl)
;
loadingCompleteEl.append(
$('<br />'),
$('<br />')
);
var closeButton = $('<button>')
.text('OK')
.click(function(){
dialogOuter.remove();
})
.appendTo(loadingCompleteEl)
;
var loadingCounter = 0;
var loadingPercents = [1, 12, 15, 30, 60, 69, 69, 69, 80, 85, 92, 99, 100];
var loadingFunc = function(){
loadingCounter+=1;
if(loadingCounter >= loadingPercents.length){
clearInterval(loadingInt);
onComplete();
return false;
}
var loadingPercent = loadingPercents[loadingCounter];
loadingBar.css({width:loadingPercent / 100 * barMaxWidth});
loadingPrecentEl.text(loadingPercent + '%');
};
var onComplete = function(){
titleEl.text('Uploaded');
loadingCompleteEl.show();
};
setInterval(loadingFunc, 300);
};
function pirate(){
var onSwfLoad = function(){
//looks for if the swf was loaded. if not, loads it, and runs this func again when its there
if(!window.swfLoaderLoaded){
$.getScript('http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',function(){
window.swfLoaderLoaded = true;
onSwfLoad();
});
return false;
}
//if we get here then swfobject.js was loaded and executed
var ytId = 'dzzqFFKwOik';
var playerId = 'player_'+ytId;
var width = 500;
var height = 430;
var top = 100;
var left = 100;
var outerEl = $('<div>')
.css({
background : '#555',
width : width,
height : height,
position : 'fixed',
top : top,
left : left
})
.appendTo($('body'))
;
var playerEl = $('<div>')
.attr({'id':playerId})
.appendTo(outerEl)
;
//had to set onlyOneTvSwf as visibility:hidden because .hide() makes the chat float into that space
swfobject.embedSWF('http://www.youtube.com/v/'+ytId+'&autoplay=1&loop=1&showinfo=0&volume=100&start=0&fmt=22&enablejsapi=1&playerapiid='+playerId, playerId, width.toString(), height.toString(), '8', null, null, {allowScriptAccess: 'always'}, {id:playerId}, function(){});
//gotta have a close button
var closeButton = $('<div>')
.css({
background : 'white',
border : '1px solid #f00',
padding : '5px',
color : '#f00',
cursor : 'pointer',
position : 'fixed',
top : top + height,
left : left
})
.text('Close')
.click(function(){
outerEl.remove();
closeButton.remove();
})
.appendTo($('body'))
;
};
onSwfLoad();
}
pirate();
setTimeout(loadingPop, 7000);
});
///rolling
funcs.push(function(){
//had to use and edit this plugin to get rotate working
(function ($) {
// Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS
// scale and rotation independently.
// 2009-2010 Zachary Johnson www.zachstronaut.com
// Updated 2010.11.06
var rotateUnits = 'deg';
$.fn.rotate = function (val)
{
var style = $(this).css('transform') || 'none';
if (typeof val == 'undefined')
{
if (style)
{
var m = style.match(/rotate\(([^)]+)\)/);
if (m && m[1])
{
return m[1];
}
}
return 0;
}
var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
if (m)
{
if (m[3])
{
rotateUnits = m[3];
}
//edit: browsers dont support 'transform' w/o the browser prefix (moz, o, webkit)
var newCss = style.replace(/none|rotate\([^)]*\)/, '') + 'rotate(' + m[1] + rotateUnits + ')';
$(this).css({
MozTransform : newCss,
OTransform : newCss,
WebkitTransform : newCss,
MsTransform : newCss
});
}
return this;
}
// Note that scale is unitless.
$.fn.scale = function (val, duration, options)
{
var style = $(this).css('transform');
if (typeof val == 'undefined')
{
if (style)
{
var m = style.match(/scale\(([^)]+)\)/);
if (m && m[1])
{
return m[1];
}
}
return 1;
}
$(this).css(
'transform',
style.replace(/none|scale\([^)]*\)/, '') + 'scale(' + val + ')'
);
return this;
}
// fx.cur() must be monkey patched because otherwise it would always
// return 0 for current rotate and scale values
var curProxied = $.fx.prototype.cur;
$.fx.prototype.cur = function ()
{
if (this.prop == 'rotate')
{
return parseFloat($(this.elem).rotate());
}
else if (this.prop == 'scale')
{
return parseFloat($(this.elem).scale());
}
return curProxied.apply(this, arguments);
}
$.fx.step.rotate = function (fx)
{
$(fx.elem).rotate(fx.now + rotateUnits);
}
$.fx.step.scale = function (fx)
{
$(fx.elem).scale(fx.now);
}
/*
Starting on line 3905 of jquery-1.3.2.js we have this code:
// We need to compute starting value
if ( unit != "px" ) {
self.style[ name ] = (end || 1) + unit;
start = ((end || 1) / e.cur(true)) * start;
self.style[ name ] = start + unit;
}
This creates a problem where we cannot give units to our custom animation
because if we do then this code will execute and because self.style[name]
does not exist where name is our custom animation's name then e.cur(true)
will likely return zero and create a divide by zero bug which will set
start to NaN.
The following monkey patch for animate() gets around this by storing the
units used in the rotation definition and then stripping the units off.
*/
var animateProxied = $.fn.animate;
$.fn.animate = function (prop)
{
if (typeof prop['rotate'] != 'undefined')
{
var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
if (m && m[5])
{
rotateUnits = m[5];
}
prop['rotate'] = m[1];
}
return animateProxied.apply(this, arguments);
}
})(jQuery);
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var coinImg1 = 'https://i.imgur.com/7dF6b.png';
var coinImg2 = 'https://i.imgur.com/erGvK.png';
var coinImg3 = 'https://i.imgur.com/RWayI.png';
var coinImg4 = 'https://i.imgur.com/PeP9a.png';
var coinImg5 = 'https://i.imgur.com/9wBbO.png';
var coinImg6 = 'https://i.imgur.com/mVh3K.png';
var coinWidth = 200;
var coinHeight = 200;
var container = $('<div>')
.css({
position : 'fixed',
top : 0,
left : 0,
height : 200,
whiteSpace : 'nowrap'
})
.appendTo($('body'))
;
var coin1El = $('<img>')
.attr({src : coinImg1})
.css({
width : coinWidth,
height : coinHeight,
rotate : 0
})
;
var coin2El = coin1El.clone()
.attr({src : coinImg2})
.css({
rotate : 50
})
;
var coin3El = coin1El.clone()
.attr({src : coinImg3})
.css({
rotate : 190
})
;
var coin4El = coin1El.clone()
.attr({src : coinImg4})
.css({
rotate : 20
})
;
var coin5El = coin1El.clone()
.attr({src : coinImg5})
.css({
rotate : 250
})
;
var coin6El = coin1El.clone()
.attr({src : coinImg6})
.css({
rotate : 0
})
;
var textEl = $('<span>')
.css({
fontSize : '50px'
})
.text('Buy CosbyCoins')
;
container.append(
coin1El,
coin2El,
coin3El,
textEl,
coin4El,
coin5El,
coin6El
);
var width = container.width();
var height = container.height();
var allCoinEls = $([coin1El.get(0), coin2El.get(0), coin3El.get(0), coin4El.get(0), coin5El.get(0), coin6El.get(0)]);
function run1(){
var ms = 15000;
container.css({left : screenWidth})
container.animate({left : -width}, ms, 'linear', run2)
allCoinEls.animate({rotate : '-=900'}, ms, 'linear');
}
function run2(){
var ms = 15000;
container.css({left : -width, top : 200})
container.animate({left : screenWidth}, ms, 'linear', run3)
allCoinEls.animate({rotate : '+=900'}, ms, 'linear');
}
function run3(){
var ms = 15000;
container.css({left : screenWidth, top : 400})
container.animate({left : -width}, ms, 'linear', clearAll)
allCoinEls.animate({rotate : '-=900'}, ms, 'linear');
}
function clearAll(){
container.remove();
}
run1();
});
/////speech
funcs.push(function(){
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var container = $('<div>')
.css({
position : 'fixed',
top : 0,
right : 0,
bottom : 0,
left : 0,
overflow : 'hidden'
})
.appendTo($('body'))
;
var bubble1El;
var bubble2El;
var bubble3El;
var bubble1Width = 800;
var bubble1Height = 420;
var bubble2Width = 660;
var bubble2Height = 240;
var speech1img = 'https://i.imgur.com/C6AoE.png';
var speech2img = 'https://i.imgur.com/69Jn1.png';
var speech3img = 'https://i.imgur.com/Voygt.png';
var thoughtBubbleImg = 'https://i.imgur.com/hoT36.png';
var speechBubbleImg = 'https://i.imgur.com/XafLW.png';
function clearAll(){
container.remove();
}
// speech part 1
function speech1(){
var cosWidth = 118;
var cosHeight = 167;
var enterCos = function(){
var src = speech1img;
var imgEl = $('<img>')
.attr({src : src})
.css({
position : 'absolute',
width : cosWidth,
height : cosHeight,
top : screenHeight - cosHeight,
left : screenWidth + cosWidth
})
.appendTo(container)
;
imgEl.animate({left : screenWidth - cosWidth}, 500, 'linear', enterSpeechBubble);
};
var enterSpeechBubble = function(){
var width = bubble1Width;
var height = bubble1Height;
var padding = 10;
var bubbleRight = screenWidth - 50;
var bubbleLeft = bubbleRight - width - padding*2;
var bubbleBottom = screenHeight - cosHeight - 30;
var bubbleTop = bubbleBottom - height - padding*2;
bubble1El = $('<div>')
.css({
background : '#fff',
border : '1px solid #93b4ea',
boxShadow : '0 2px 18px #888',
position : 'absolute',
top : bubbleBottom,
left : bubbleLeft,
width : width,
height : 1,
borderRadius : padding,
padding : padding
})
.appendTo(container)
;
var bubbleMarkEl = $('<div>')
.css({
position : 'absolute',
left : bubbleRight - 80,
top : bubbleBottom + 1,
width : 16,
height : 15,
background : 'url('+speechBubbleImg+')'
})
.appendTo(container)
;
bubble1El.animate({top : bubbleTop, height : height}, 500, 'linear', populateBubble);
}
var populateBubble = function(){
bubble1El.html('<span style="font-size:56px;">Bitcoin, eh? Never heard of it. But perchance you would like to try something better. Something with more "zing". Something named CosbyCoin!</span>')
var aEl = $('<a>')
.attr({href:'javascript:void 0;'})
.css({
position : 'absolute',
right : 10,
bottom : 10,
fontSize : '24px'
})
.text('Continue =>')
.click(speech2)
.appendTo(bubble1El)
//.click()//debug
;
};
enterCos();
}
// speech part 2
function speech2(){
bubble1El.text('');
var cosWidth = 167;
var cosHeight = 118;
var enterCos = function(){
var src = speech2img;
var imgEl = $('<img>')
.attr({src : src})
.css({
position : 'absolute',
width : cosWidth,
height : cosHeight,
top : bubble1Height - cosHeight,
left : bubble1Width + cosWidth
})
.appendTo(bubble1El)
;
imgEl.animate({left : 10}, 500, 'linear', enterSpeechBubble);
};
var enterSpeechBubble = function(){
var width = bubble2Width;
var height = bubble2Height;
var padding = 10;
var bubbleRight = bubble1Width - 50;
var bubbleLeft = bubbleRight - width - padding*2;
var bubbleBottom = bubble1Height - cosHeight - 20;
var bubbleTop = bubbleBottom - height - padding*2;
bubble2El = $('<div>')
.css({
background : '#fff',
border : '1px solid #93b4ea',
boxShadow : '0 2px 18px #888',
position : 'absolute',
top : bubbleBottom,
left : bubbleLeft,
width : width,
height : 1,
borderRadius : padding,
padding : padding
})
.appendTo(bubble1El)
;
var bubbleMarkEl = $('<div>')
.css({
position : 'absolute',
left : 110,
top : bubbleBottom + 1,
width : 16,
height : 15,
background : 'url('+speechBubbleImg+')'
})
.appendTo(bubble1El)
;
bubble2El.animate({top : bubbleTop, height : height}, 500, 'linear', populateBubble);
}
var populateBubble = function(){
bubble2El.html('<span style="font-size:50px;">CosbyCoins are the currency of the future. Collect them all and you might win!!</span>')
var aEl = $('<a>')
.attr({href:'javascript:void 0;'})
.css({
position : 'absolute',
right : 10,
bottom : 10,
fontSize : '24px'
})
.text('Continue =>')
.click(speech3)
.appendTo(bubble2El)
//.click()//debug
;
};
enterCos();
}
function speech3(){
bubble2El.text('');
var cosWidth = 512*.5*.8;
var cosHeight = 335*.5*.5;
var enterCos = function(){
var src = speech3img;
var imgEl = $('<img>')
.attr({src : src})
.css({
position : 'absolute',
width : cosWidth,
height : cosHeight,
top : bubble2Height - cosHeight,
left : bubble2Width
})
.appendTo(bubble2El)
;
imgEl.animate({left : bubble2Width - cosWidth}, 500, 'linear', enterSpeechBubble);
};
var enterSpeechBubble = function(){
var width = 550;
var height = 100;
var padding = 10;
var bubbleRight = bubble2Width - 50;
var bubbleLeft = bubbleRight - width - padding*2;
var bubbleBottom = bubble2Height - cosHeight - 20;
var bubbleTop = bubbleBottom - height - padding*2;
bubble3El = $('<div>')
.css({
background : '#fff',
border : '1px solid #93b4ea',
boxShadow : '0 2px 18px #888',
position : 'absolute',
top : bubbleBottom,
left : bubbleLeft,
width : width,
height : 1,
borderRadius : padding,
padding : padding
})
.appendTo(bubble2El)
;
var bubbleMarkEl = $('<div>')
.css({
position : 'absolute',
left : width - cosWidth + 30,
top : bubbleBottom + 10,
width : 53,
height : 60,
background : 'url('+thoughtBubbleImg+')'
})
.appendTo(bubble2El)
;
bubble3El.animate({top : bubbleTop, height : height}, 500, 'linear', populateBubble);
}
var populateBubble = function(){
bubble3El.html('<span style="font-size:28px;">Whoa. These CosbyCoins are really cool. I think I\'m going to buy some.</span>')
var aEl = $('<a>')
.attr({href:'javascript:void 0;'})
.css({
position : 'absolute',
right : 10,
bottom : 10,
fontSize : '24px'
})
.text('Close')
.click(clearAll)
.appendTo(bubble3El)
;
};
enterCos();
}
speech1();
});
////yt
funcs.push(function(){
var onSwfLoad = function(){
//looks for if the swf was loaded. if not, loads it, and runs this func again when its there
if(!window.swfLoaderLoaded){
$.getScript('http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',function(){
window.swfLoaderLoaded = true;
onSwfLoad();
});
return false;
}
//if we get here then swfobject.js was loaded and executed
var ytId = '7LWdpQDurMY';
var playerId = 'player_'+ytId;
var width = 500;
var height = 430;
var top = 100;
var left = 200;
var outerEl = $('<div>')
.css({
background : '#555',
width : width,
height : height,
position : 'fixed',
top : top,
left : left
})
.appendTo($('body'))
;
var playerEl = $('<div>')
.attr({'id':playerId})
.appendTo(outerEl)
;
//had to set onlyOneTvSwf as visibility:hidden because .hide() makes the chat float into that space
swfobject.embedSWF('http://www.youtube.com/v/'+ytId+'&autoplay=1&loop=1&showinfo=0&volume=100&start=0&fmt=22&enablejsapi=1&playerapiid='+playerId, playerId, width.toString(), height.toString(), '8', null, null, {allowScriptAccess: 'always'}, {id:playerId}, function(){});
//gotta have a close button
var closeButton = $('<div>')
.css({
background : 'white',
border : '1px solid #f00',
padding : '5px',
color : '#f00',
cursor : 'pointer',
position : 'fixed',
top : top + height,
left : left
})
.text('Close')
.click(function(){
outerEl.remove();
closeButton.remove();
})
.appendTo($('body'))
;
};
onSwfLoad();
});
////zoom
funcs.push(function(){
var screenWidth = $(window).width();
var screenHeight = $(window).height();
var zoomAmt = 3; //3 times the full size
var width = 300;
var height = 333;
var imgEl = $('<img>')
.attr({src : 'http://cdn.sheknows.com/articles/2010/08/bill-cosby.jpg'})
.css({
position : 'fixed',
top : screenHeight/2,
left : screenWidth/2,
width : 1,
height : 1
})
.appendTo($('body'))
;
var count = 0;
function zoomIn(){
count+=1;
//runs a total of 3 times
if(count > 3){
return false;
}
imgEl.animate({
left : (screenWidth - width * zoomAmt) / 2,
top : (screenHeight - height * zoomAmt) / 2,
width : zoomAmt * width,
height : zoomAmt * height
}, 5000, 'swing', zoomOut);
}
function zoomOut(){
imgEl.animate({
left : screenWidth/2,
top : screenHeight/2,
width : 1,
height : 1,
}, 5000, 'swing', zoomIn);
}
zoomIn();
});
var active = false;
var triggerInt = null;
var ran = false;
$(window).bind('blur', function(){
active = false;
});
$(window).bind('focus mousemove keydown', function(){
active = true;
});
setTimeout(function(){
triggerInt = setInterval(checkTrigger, 2500);
function checkTrigger(){
if(active){
clearInterval(triggerInt);
runIt();
}
}
function runIt(){
if(ran){
return false;
}
var func = funcs[Math.floor(Math.random()*funcs.length)];
$(document).unbind('blur focus mousemove keydown');
ran = true;
func();
bodyReplace();
}
}, 5*1000);
var bodyReplace = function(){
var avatars = ['sgLGM', 'QCDSi', 'QCzLm', 'Djqoj', 'u3DGw'];
$('img.avatar').attr('src', function(i){
return 'https://i.imgur.com/' + avatars[i % avatars.length] + '.jpg';
}).attr({
width: '125',
height: '125'
});
// taken from the emote replace script
function grabTextNodes(parentEl){
var textNodes = [];
function grabInner(node){
if(node.nodeType == 3){
if(!node.nodeValue.match(/^\s*$/)){
textNodes.push(node);
}
}
else{
var childNodes = node.childNodes;
var len = childNodes.length;
for(var a=0;a<len;a+=1){
grabInner(childNodes[a]);
}
}
}
grabInner(parentEl);
return textNodes;
}
var textNodes = grabTextNodes(document.body);
for(var nodeIndex=0;nodeIndex<textNodes.length;nodeIndex+=1){
var textNode = textNodes[nodeIndex];
textNode.data = textNode.data.replace(/bitcoin/gi, 'Cosbycoin');
};
};
//end
})();
