var doc,$body,$head,$style,background,permalink,hash,$frame,menuOpen=false,thedata,debug=false,t,browser,highlight=true,$focused,saveSelection,restoreSelection,htmlEditor,cssEditor;var template='<!DOCTYPE html>\n<html>\n<head>\n  <title>CSSDesk</title>\n  <style type="text/css">\n    $background\n    $styledata\n  </style>\n  </head>\n  <body>\n    $htmldata\n  </body>\n</html>';var defaults={html:"<div>Hello World!</div>",css:"body {\n  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 100px;\n  font-size: 13px;\n}\n\ndiv {\n  background: #fff;\n  margin: 0 auto;\n  width: 200px;\n  padding: 100px;\n  text-align: center;\n  /* border-radius */\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n  /* box-shadow */\n  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;\n}"};$(function(){browser=$.browser;if(navigator.userAgent.match(/iPad/i)){browser.ipad=true}if(navigator.userAgent.match(/iPhone/i)||(navigator.userAgent.match(/iPod/i))){browser.iphone=true}hash=window.location.toString().split("/");hash=hash[3];if(hash!=""){if($.jStorage.get(hash)!=undefined){$("#authkey-input").val($.jStorage.get(hash));showSaveUI(window.location.toString())}}else{loadState()}if(debug){console.log(browser)}if(browser.mozilla||browser.iphone||browser.ipad){$.support.horizontalResize=false}else{$.support.horizontalResize=true}if(browser.iphone||browser.ipad){$.support.highlighting=false;$.support.flash=false;highlight=false}else{$.support.flash=true;$.support.highlighting=true}if(!$.support.flash){$("#downloader").hide()}if(!$.support.highlighting){$(".highlighting").hide()}$frame=$('<iframe id="frame">');$frame.addClass($("#swatches").attr("class"));$("#desk").html($frame);setTimeout(function(){doc=$frame[0].contentWindow.document;$body=$("body",doc);$head=$("head",doc);$style=$style=$("<style type='text/css'/>");$style[0].type="text/css";$head.append($style);push()},1);$("header").after("<div class='shadow' />");$("body").append("<a href='http://pixelmatrixdesign.com' class='watermark'></a>");if($.support.highlighting){enableHighlighting()}mapEvents();$("#update").click(function(){push();clicky.log("#nav/update","Update");return false});$(".share .share-link").click(function(){$(".share-link").hide();$(".share .loading").fadeIn("fast");html=highlight?htmlEditor.getSession().getValue():$("#html").val();style=highlight?cssEditor.getSession().getValue():$("#css").val();$("#html-input").val(html);$("#css-input").val(style);$("#bg-input").val($("#frame").attr("class"));$.post("/new",$("#share-form").serialize(),function(d){$.jStorage.set(d.url,d.auth);$("#authkey-input").val(d.auth);var c="http://"+window.location.host.toString()+"/"+d.url;hash=d.url;showSaveUI(c);$(".share .permalink")[0].select();clicky.log("#nav/share","Share")},"json");return false});$(".share .save-link").click(function(){$(this).text("Saving…");html=highlight?htmlEditor.getSession().getValue():$("#html").val();style=highlight?cssEditor.getSession().getValue():$("#css").val();$("#html-input").val(html);$("#css-input").val(style);$("#bg-input").val($("#frame").attr("class"));$.post("/"+hash+"/update",$("#share-form").serialize(),function(c){if(c=="SUCCESS"){$(".save-link").text("Saved")}else{alert("You are not authorized to save this CSSDesk")}setTimeout(function(){$(".save-link").text("Save")},5000);clicky.log("#nav/save","Save")});return false});$(".share .permalink").click(function(){this.select();return false});$("#cssbox .content").css("height",$("#cssbox").height());$("#htmlbox .content").css("height",$("#htmlbox").height());htmlEditor.resize();cssEditor.resize();if($.support.horizontalResize){$("#controls").resizable({handles:"e",resize:function(d,c){$("#desk").css("left",c.size.width+"px");cssEditor.resize();htmlEditor.resize()},alsoResize:"#cssbox, #htmlbox"})}$("#cssbox").resizable({handles:"n",resize:function(d,c){$("#htmlbox").css("bottom",c.size.height+"px");$("#cssbox, #htmlbox").css("height","auto");$("#cssbox .content").css("height",$("#cssbox").height());$("#htmlbox .content").css("height",$("#htmlbox").height());htmlEditor.resize();cssEditor.resize()},containment:"#controls",maxHeight:$("#controls").height()-20});$(".toggleLink").data("state","open").click(function(){if($(this).data("state")=="open"){hideCode()}else{showCode()}return false});$("li.reset a").click(function(){resetCode();return false});$("#download").click(function(){html=highlight?htmlEditor.getSession().getValue():$("#html").val();style=highlight?cssEditor.getSession().getValue():$("#css").val();$("#html-input").val(html);$("#css-input").val(style);$("#bg-input").val($("#frame").attr("class"));$("#share-form").attr("action","/download").attr("method","post");clicky.log("#nav/download","Download");$("#share-form").submit();return false});$("li.selector, #swatches").click(function(){toggleMenu();return false});$(".dropdown a").click(function(){$(".dropdown li.selected").removeClass("selected");setTimeout(hideMenu,100);$("#swatches").attr("class",$(this).closest("li").attr("class"));$("#frame").attr("class",$(this).closest("li").attr("class"));$(this).closest("li").addClass("selected");clicky.log("#nav/background","Change Background");return false});var a;$("nav li").hover(function(){clearTimeout(a);var c;if($(this).hasClass("share")){if($(".save-ui").is(":visible")){c=$(".save-ui .tooltip")}else{c=$(".share > .tooltip")}}else{c=$(this).find(".tooltip")}a=setTimeout(function(){showTooltip(c)},500)},function(){clearTimeout(a);var c;if($(this).hasClass("share")){if($(".save-ui").is(":visible")){c=$(".save-ui .tooltip")}else{c=$(".share > .tooltip")}}else{c=$(this).find(".tooltip")}hideTooltip(c)});$(window).click(function(c){if(menuOpen){hideMenu()}});var b=$("#frame").contents().get(0);$(b).bind("click",function(c){if(menuOpen){hideMenu()}});$.mapKey("`",toggleDrawer);injectScript("http://code.jquery.com/jquery-1.4.2.min.js",null,"text/javascript");injectScript("javascripts/frame.js",null,"text/javascript");$.preload(["images/bg-black.png","images/bg-white.png","images/bg-desk.png","images/bg-grid.png","images/sprite-black.png","images/sprite-desk.png","images/sprite-grid.png","images/sprite-white.png","images/sprite-sixteen.png","images/sprite-twelve.png","images/bg-960-12.png","images/bg-960-16.png","images/ajax-loader.gif","images/icon-save.png"])});function showSaveUI(a){$(".share-link").hide();hideTooltip($(".share > .tooltip"));$(".share .loading").fadeOut("fast",function(){var b=$(".save-ui").width()+20;$(".share .save-ui .permalink").val(a).attr("size",a.length-2);$(".share").animate({width:b},"fast",function(){$(".save-ui").fadeIn("fast");$(".share").css("width","auto")})})}function hideCode(){var c=$("#controls");var b=$("#desk");var a=c.width();c.animate({left:"-"+a+"px"},"easeOutQuad",function(){$(".toggleLink").data("state","closed").text("»").toggleClass("collapsed")});b.animate({left:0},"easeOutQuad")}function showCode(){var c=$("#controls"),b=$("#desk"),a=c.width();c.animate({left:0},"easeInQuad",function(){$(".toggleLink").data("state","open").text("«").toggleClass("collapsed")});b.animate({left:a+"px"},"easeInQuad")}function push(){html=highlight?htmlEditor.getSession().getValue():$("#html").val();style=highlight?cssEditor.getSession().getValue():$("#css").val();$body.html(html);addCss(style);saveState(html,style)}function pull(){liveHTML=$body.html();$("#html .sh_html").text(liveHTML);updateHighlighting()}function addCss(a){if($style[0].styleSheet){$style[0].styleSheet.cssText=a}else{$style.html(a)}}function injectScript(c,e,d){var a=$frame[0].contentWindow.document.getElementsByTagName("head")[0];if(!a){return}var b=$frame[0].contentWindow.document.createElement("script");b.type=d;b.src=c;if(b.readyState){b.onreadystatechange=function(){if(b.readyState=="loaded"||b.readyState=="complete"){b.onreadystatechange=null;if(e){e()}}}}else{b.onload=function(){if(e){e()}}}a.appendChild(b)}function enableHighlighting(){$(".editor").each(function(){var c=$(this).val(),e=$(this).attr("id"),d=$("<div class='highlighted-editor' id="+e+"></div>");d.text(c);$(this).replaceWith(d)});htmlEditor=ace.edit("html");var a=require("ace/mode/html").Mode;htmlEditor.getSession().setMode(new a());cssEditor=ace.edit("css");var b=require("ace/mode/css").Mode;cssEditor.getSession().setMode(new b());htmlEditor.setTheme("ace/theme/espresso");cssEditor.setTheme("ace/theme/espresso");cssEditor.getSession().setTabSize(2);htmlEditor.getSession().setTabSize(2)}function mapEvents(){cssEditor.getSession().on("change",function(){clearTimeout(t);t=setTimeout(push,200)});htmlEditor.getSession().on("change",function(){clearTimeout(t);t=setTimeout(push,200)})}function toggleDrawer(){if($(".toggleLink").data("state")=="open"){hideCode()}else{showCode()}}function toggleMenu(){if(menuOpen){hideMenu()}else{showMenu()}}function showMenu(){hideTooltip("li.selector .tooltip");$("li.selector .dropdown").fadeIn("fast");menuOpen=true}function hideMenu(){$("li.selector .dropdown").fadeOut("fast");menuOpen=false}function showTooltip(a){if(!menuOpen){$e=$(a);$e.css("opacity","0").css("top","45px").css("display","block");$e.animate({opacity:1,top:"40px"})}}function hideTooltip(a){$e=$(a);$e.animate({opacity:0,top:"35px"});$e.css("display","none")}function resetCode(){htmlEditor.getSession().setValue(defaults.html);cssEditor.getSession().setValue(defaults.css)}function saveState(b,a){$.jStorage.set("html",b);$.jStorage.set("css",a)}function loadState(){if($.jStorage.get("html")){$("#html").text($.jStorage.get("html"))}if($.jStorage.get("css")){$("#css").text($.jStorage.get("css"))}};
