var template = { url : "http://jsbin.com/osigu", html : "<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\n  \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\">\n<head>\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.2.6\/jquery.min.js\"><\/script>\n<title>Sandbox<\/title>\n<meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\" \/>\n<style type=\"text\/css\" media=\"screen\">\nbody { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }\ndiv {\n  margin: 5px;\n  border: 1px solid #000;\n  padding: 5px;\n}\np {\n  background-color: yellow;\n}\np.selected {\n  background-color: blue;\n  color: white;\n}\n#the-a {\n  color: black;\n  text-decoration: underline;\n  cursor: pointer;\n}\n<\/style>\n<\/head>\n<body>\n  <div>\n    Primul div:\n    <p>Primul paragraf din primul div<\/p>\n    <p>Al doilea paragraf din primul div<\/p>\n    <p class=\"special\">Al treilea paragraf din primul div, dar *special*<\/p>\n    <div>\n      Un div, copil al primului div\n      <strong>Un element strong, primul descendent al div-ului copil<\/strong>\n      <p>Primul paragraf din div-ul copil (nu si primul descendent)<\/p>\n      <p>Al doilea paragraf din div-ul copil<\/p>\n    <\/div>\n    <p><\/p>\n  <\/div>\n  <p class=\"special\">Un paragraf *special*, descendent al lui body<\/p>\n  <a id=\"the-a\">Vezi sursa JS pentru a intelege ce se intampla daca faci click<\/a>\n<script type=\"text\/javascript\">\n<!-- we run in the footer so no need to use onload -->\n%code%\n<\/script>\n<\/body>\n<\/html>", javascript : "$('#the-a').click(function() {\n  $(\"div *\") \/\/ mai intai, setul este format din toti descendentii de div-uri\n    .filter(\"p\") \/\/ apoi, pastram din acest set doar paragrafele\n    .css(\"background-color\", \"pink\") \/\/ le setam culoarea de fundal la roz\n      .filter(\".special\") \/\/ apoi, filtram dintre paragrafe pe cele cu clasa special\n      .css(\"font-weight\", \"bold\") \/\/ le punem litere ingrosate\n    .end() \/\/ revenim la setul anterior - paragrafele\n  .end() \/\/ revenim la setul anterior - descendentii de div-uri\n    .filter(\"strong\") \/\/ filtram doar elementele strong\n      .wrap(\"<big><\/big>\") \/\/ le incapsulam intr-un tag big pe fiecare\n    .end() \/\/ revenim la setul anterior - descendentii de div-uri\n  .css(\"font-style\", \"italic\"); \/\/ si pentru toate elementele din acest set initial, setam font aldin\n});" };