var bookspecs = [ { color: "rgb(180, 30, 30)", width: 50, height: 320 }, { color: "rgb(55, 65, 114)", width: 54, height: 260 }, { color: "rgb(60, 130, 40)", width: 48, height: 154 }, { color: "rgb(180, 30, 30)", width: 52, height: 230 }, { color: "rgb(27,29,26)", width: 40, height: 220 }, { color: "rgb(112,47,55)", width: 60, height: 265 }, { color: "rgb(46,100,64)", width: 32, height: 320 }, { color: "rgb(113,37,21)", width: 28, height: 230 } ]; var permanentSites = [ { name: "Google", url: "http://www.google.co.uk", icon: "search", "uppercase": false, font: "Open Sans", "font-size": "1.8em", "font-weight": "normal", texture: 'canvas', bookspec: { color: "rgb(150,20,0)", width: 48, height: 305 } }, { name: "Google Images", url: "http://www.google.co.uk/imghp?hl=en&tab=ii", texture: 'canvas', "uppercase": false, font: "Open Sans", "font-size": "1.4em", "font-weight": "normal", bookspec: { color: "rgb(150,20,0)", width: 42, height: 260 } }, { name: "Google Maps", icon: "google-maps", url: "https://maps.google.co.uk/maps?hl=en", texture: 'canvas', "uppercase": false, font: "Open Sans", "font-size": "1.4em", "font-weight": "normal", bookspec: { color: "rgb(150,20,0)", width: 42, height: 260 } }, { name: "Facebook", url: "http://www.facebook.com", icon: "facebook", "icon-placement": "before", bookspec: { color: "rgb(55, 65, 114)", width: 42, height: 280 } }, { name: "LinkedIn", icon: "linked-in", "icon-placement": "before", url: "http://www.linkedin.com/home", bookspec: { color: "rgb(55, 65, 114)", width: 42, height: 280 } }, { name: "XKCD", url: "http://www.xkcd.com/", bookspec: { color: "rgb(120,120,120)", width: 24, height: 170 } }, { name: "Stack Overflow", url: "http://stackoverflow.com/" }, { name: "The Digital Picture", url: "http://www.the-digital-picture.com/", icon: "camera", "icon-placement": "before", bookspec: { width: 24, height: 320 } }, { name: "POTN", url: "http://photography-on-the.net/forum/showthread.php?t=141406", icon: "camera", "font-size": "1.6em", bookspec: { height: 160 } }, { name: "Gizmodo", url: "http://www.gizmodo.co.uk/", bookspec: { color: "rgb(100,100,150)", height: 182, width: 32 } }, { name: "Reddit", url: "http://www.reddit.com/" }, { name: " Halifax", url: "https://www.halifax-online.co.uk/personal/logon/login.jsp", bookspec: { color: "rgb(27,29,26)", height: 290, width: 32 } }, { name: "Money Dashboard", icon: "pie-chart", url: "https://my.moneydashboard.com/Login.aspx", bookspec: { color: "rgb(27,29,26)", height: 290, width: 32 } }, { name: "Wave", icon: "pie-chart", url: "https://www.waveapps.com/", bookspec: { color: "rgb(27,29,26)", height: 290, width: 32 } }, { name: "Time.is", url: "http://time.is/" }, { name: "GrooveShark", url: "http://grooveshark.com/" }, { name: "YouTube", url: "http://www.youtube.com/", bookspec: { color: "rgb(180,0,0)", height: 311, width: 32 } }, { name: "YouTube Subscriptions", url: "http://www.youtube.com/feed/subscriptions", bookspec: { color: "rgb(180,0,0)", height: 311, width: 32 } }, { name: "DuoLingo", url: "http://www.duolingo.com/", bookspec: { color: "rgb(88,159,0)", height: 180 } }, { name: "South Park", url: "http://www.watchsouthparkonline.net/", bookspec: { color: "rgb(49,86,138)", height: 246, width: 32 } }, { name: "The Simpsons", url: "http://wtso.tv/", bookspec: { color: "rgb(49,86,138)", height: 246, width: 32 } }, { name: "Movies", url: "http://vodly.to/", bookspec: { color: "rgb(49,86,138)", height: 246, width: 32 } }, { name: "iPlayer", url: "http://www.bbc.co.uk/iplayer/", bookspec: { color: "rgb(49,86,138)", height: 246, width: 32 } }, // { // name: "", // url: "" // } ]; var $texture; var leather = document.getElementById('leather').getContext('2d'); $(function(){ renderPage(); }); var resizeCalls = 0; $(window).resize(function() { renderPage(); }); var bisOn = false; var canvases = {}; var renderPage = function() { getFlickrPics(); if(localStorage.target){ var isTrueSet = (localStorage.target === 'true'); $('#targetblank').prop('checked', isTrueSet); } if(localStorage.tags){ $('#tags').val(localStorage.tags); } var imgs = { leather: new Image(), canvas: new Image() } imgs.leather.src = 'img/leather-long.png'; imgs.canvas.src = 'img/canvas.png'; var imgsLoaded = 0; $.each(imgs, function(index, img){ canvases[index] = $(""); $('body').append(canvases[index]); img.onload = function() { canvases[index].get(0).getContext('2d').drawImage(img, 0, 0); imgsLoaded++; if(imgsLoaded === Object.keys(imgs).length){ doBooks(); } } }); } $('#targetblank').bind('change', function(e){ $('#main').html(''); localStorage.target = this.checked; doBooks(); }); $('#tags').keyup(function(e){ if(e.which === 13){ localStorage.tags = $(this).val(); getFlickrPics($(this).val()); } }); $('.addsite').keyup(function(e){ if(e.which === 13){ addSite(); } }); $('#optionsform').submit(function(e){ e.preventDefault(); return false; }); function addSite(){ var name = $('#sitename').val(); var url = $('#siteurl').val(); if(name && url && name !== "" && url !== ""){ if(localStorage.sites){ var localsites = JSON.parse(localStorage.sites); } else { var localsites = []; } var exists = false; var sites = permanentSites.concat(localsites); for(var i = 0, len = sites.length; i < len; i++) { if(sites[i].name == name) { exists = true; } } if(exists){ alert("Site must have a unique name!"); } else { var site = { name: name, url: url, editable: true }; localsites.push(site); localStorage.sites = JSON.stringify(localsites); console.log(localsites); console.log(localStorage.sites); doBooks(); } } else { alert("You must have url and name set!"); } } var $books = []; var $main = $('#main'); var doBooks = function(){ bisOn = true; $main.html(''); var k = 0; var blen = bookspecs.length; var totalWidth = 0; var docWidth = window.innerWidth-22; var sites = permanentSites.slice(); if(localStorage.sites){ sites = sites.concat(JSON.parse(localStorage.sites)); } for ( var i = 0, len = sites.length; i < len; i++) { var spec = $.extend(true, {}, bookspecs[k]); if(sites[i].bookspec !== "undefined"){ $.extend(true, spec, sites[i].bookspec); } if(totalWidth + spec.width > docWidth) spec.width = (docWidth - totalWidth); else if (totalWidth >= docWidth) break; totalWidth += spec.width; var $book = makeBook(spec,sites[i]); $main.append($book); k = (i+1) % blen; } while(totalWidth < docWidth){ spec = $.extend(true, {}, bookspecs[Math.floor(Math.random()*bookspecs.length)]); totalWidth += spec.width; if(totalWidth > docWidth){ spec.width = docWidth - (totalWidth - spec.width); } var $book = makeBook(spec,{name: "", url: ""}); $main.append($book); } } var makeBook = function(spec, site) { site = $.extend(true, { url: "", name: "", font: "garamond", "font-size": "1.25em", "font-weight": "900", color: "#BBA217", uppercase: true, "icon-placement": "after", texture: 'leather', editable: false }, site); var contHeight = $main.height(); var $book = $('
'); if(site.url !== "") { $book.addClass('sitebook'); } $book.height(spec.height); $book.width(spec.width); $book.offset({top: contHeight - spec.height}); var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var $cont = $(''); $cont.height(spec.height); $cont.width(spec.width); var $inner = $(''); var $link = $('' + site.name + ''); $link.css("padding", (spec.width - $link.width())/2 + "px 12px"); $link.css("top", "-" + $link.outerHeight()/2 + "px"); $link.width(spec.height); if($('#targetblank').is(':checked')) $link.attr('target', '_blank'); if(typeof site.icon !== "undefined") { if(site["icon-placement"].toLowerCase() === "before") { $link.prepend(" "); } else { $link.append(" "); } } if(site.editable) { var $editLinks = $(''); var $deleteLink = $(''); $deleteLink.append(' '); $editLinks.append($deleteLink); $deleteLink.click(function(e){ e.preventDefault(); var localSites = JSON.parse(localStorage.sites); for(var i = 0, len = localSites.length; i < len; i++){ if(localSites[i].url === site.url) { localSites.splice(i,1); break; } } localStorage.sites = JSON.stringify(localSites); doBooks(); }); $link.hover(function(){ $link.append($editLinks); }, function(){ $editLinks.remove(); }); } if(site.uppercase) { $link.css('text-transform', 'uppercase'); } $link.css('font-family', site.font); $link.css('font-weight', site["font-weight"]); $link.css('font-size', site["font-size"]); canvas.id = "site-" + i; canvas.className = 'canvas-texture'; canvas.width = spec.width; canvas.height = spec.height; context.fillStyle = spec.color; $book.append(canvas); context.fillRect(0,0,spec.width, spec.height); canvases[site.texture].get(0).getContext('2d').blendOnto(context,'overlay'); var grd = context.createLinearGradient(0.000, spec.height/2, spec.width, spec.height/2); // Gold Lines context.fillStyle = "#bba217"; context.fillRect(0,15, spec.width, 2); context.fillRect(0,10, spec.width, 2); context.fillRect(0,spec.height-15, spec.width, 2); context.fillRect(0,spec.height-10, spec.width, 2); // Add colors grd.addColorStop(0.000, 'rgba(0, 0, 0, 0.500)'); grd.addColorStop(0.400, 'rgba(0,0,0,0)'); grd.addColorStop(1.000, 'rgba(255, 255, 255, 0.200)'); context.fillStyle = grd; context.fillRect(0,0,spec.width,spec.height); grd = context.createLinearGradient(spec.height/2, 0, spec.width/2, spec.height); // Add colors grd.addColorStop(0.000, 'rgba(0, 0, 0, 0)'); grd.addColorStop(0.900, 'rgba(0, 0, 0, 0.400)'); grd.addColorStop(1.000, 'rgba(0, 0, 0, 0.600)'); context.fillStyle = grd; context.fillRect(0,0,spec.width,spec.height); $inner.append($link); $cont.append($inner); $book.append($cont); return $book; } var fisOn = false; var getFlickrPics = function(tag) { if(fisOn === true) return; fisOn = true; var zi = 2; var $cont = $('#pictures'); $cont.html(''); if(typeof tag === "undefined"){ if(localStorage.tags) tag = localStorage.tags; else tag = "cat"; } var url = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; var docWidth = $(document).width(); $.getJSON( url, { tags: tag, tagmode: "any", format: "json" }) .done(function( data ) { var newWidth = 160; var angle = 43 * (Math.PI/180); var x = newWidth + 22; var y = newWidth + 48; var acWidth = Math.abs((y * Math.sin(angle)) + (x * Math.cos(angle))); var limitPics = (docWidth/(y * Math.sin(angle)))-2; var remainingSpace = (((docWidth) - (limitPics * acWidth))/(limitPics)); $.each( data.items, function( i, item ) { var $img = $("").attr("src", item.media.m); $img.load(function(){ var ratio = $(this).width() / $(this).height(); if(ratio >= 1){ // landscape $(this).width((newWidth * ratio)); $(this).height(newWidth); } else { // portrait $(this).height((newWidth / ratio)); $(this).width(newWidth); } $(this).parent().width(newWidth).height(newWidth); var offset = ((newWidth*(i)) + (x * Math.cos(angle)) + (remainingSpace * i!==0)); $(this).parent().parent().hide(); $polaroid.css('opacity', 1); var that = this; setTimeout(function(){ $(that).parent().parent().width(newWidth+2).height(newWidth+2).fadeIn("fast").css('left', $(document).width()/2).animate({left: offset}, Math.abs(($(document).width()/2)-offset)*2).addClass("hang"); }, i*100); $(this).parent().parent().mouseover(function(){ $(this).css('z-index',zi); zi++;}); }); var $imglink = $(""); var $polaroid = $(""); $imglink.attr('href', item.link); $imglink.append($img); $polaroid.append($imglink); $cont.append($polaroid); $polaroid.css('opacity', 0); if ( i >= limitPics-1 ) { return false; } }); fisOn = false; }); }