Kitchen Kapers

2554 Berwyn Rd

Click on thumbnail to enlarge. Please choose the thumnail numbers of the images you wish to move forward with editing.

nil
ERROR

ERROR

Switch View
  1. <%
  2. --[[ Define some variables to make locating other resources easier
  3. firstPage was defined in our manifest.]]
  4. local image = getImage( index )
  5. local theRoot = ".."
  6. local others = "."
  7. local mySize = "large"
  8. %>
  9. <% --[[ Include the page header]] %>
  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  12. <head>
  13. <% --[[ HTML page metadata and stylesheets ]] %>
  14. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  15. <meta name="Keywords" content="photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom" >
  16. <meta name="generator" content="Adobe Photoshop Lightroom" >
  17. <title>$model.metadata.siteTitle.value</title>
  18. <link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="$others/custom.css" >
  19. <link rel="stylesheet" type="text/css" media="screen" title="Custom Settings" href="$theRoot/resources/css/master.css" >
  20. <% --[[ Scripting support for rollovers and (when previewed in Lightroom) live Update, photobin syncing ]] %>
  21. <script type="text/javascript">
  22. window.AgMode = "$mode";
  23. cellRolloverColor="#A1A1A1";
  24. cellColor="#949494";
  25. <% if mode == 'preview' then %>
  26. window.AgOnLoad = function() {
  27. tellLightroomWhatImagesWeAreUsing();
  28. setActiveImageSize( "<%= mySize %>" );
  29. <% if image then %>
  30. callCallback( "showInPhotoBin", "$image.imageID" );
  31. <% end %>
  32. }
  33. <% end %>
  34. </script>
  35. <script type="text/javascript" src="$theRoot/resources/js/live_update.js">
  36. </script>
  37. <% --[[ Special hacks for Internet Explorer ]] %>
  38. <!--[if lt IE 7.]> <script defer type="text/javascript" src="$theRoot/resources/js/pngfix.js"></script> <![endif]-->
  39. <!--[if gt IE 6]> <link rel="stylesheet" href="$theRoot/resources/css/ie7.css"></link> <![endif]-->
  40. <!--[if lt IE 7.]> <link rel="stylesheet" href="$theRoot/resources/css/ie6.css"></link> <![endif]-->
  41. </head>
  42. <% --[[ The main HTML page begins here ]] %>
  43. <body>
  44. <% --[[ experimental; get colors from kuler]] %>
  45. <% if model.nonCSS.showKuler then %>
  46. <% if mode == 'preview' then %>
  47. <script language="javascript">
  48. var coloredElements = [
  49. "appearance.textColor.color",
  50. "nonCSS.cellColor",
  51. "appearance.itemNumber.color",
  52. "appearance.body.background-color",
  53. "nonCSS.thumbBorderColor",
  54. "appearance.previewFull.background-color",
  55. "nonCSS.cellRolloverColor",
  56. "nonCSS.cellBorderColor",
  57. "appearance.detailText.color",
  58. "nonCSS.largeImageBorderColor",
  59. "nonCSS.sectionBorderColor"
  60. ];
  61. function hexColorCmp(aValue,bValue) {
  62. aValueSplit = str_split(aValue, 2);
  63. aValueSum = hexdec(aValueSplit[0]) + hexdec(aValueSplit[1]) + hexdec(aValueSplit[2]);
  64. bValueSplit = str_split(bValue, 2);
  65. bValueSum = hexdec(bValueSplit[0]) + hexdec(bValueSplit[1]) + hexdec(bValueSplit[2]);
  66. return aValueSum - bValueSum;
  67. }
  68. function statusMessage( html ) {
  69. document.getElementById( 'kuler_message' ).innerHTML = html;
  70. }
  71. function subStatusMessage( html ) {
  72. document.getElementById( 'kuler_detail' ).innerHTML = html;
  73. }
  74. function getURLContents ( url, callback ) {
  75. document.AgFetchResults = callback;
  76. callCallback( "fetchURL", url );
  77. }
  78. var colors = null;
  79. function parseKulerXML( xmlstring ) {
  80. // convert string to XML object
  81. var xmlobject;
  82. // Windows requires us to include namespace prefix when searching for tags
  83. // by name. Safari doesn't. And neither offers an api for searching by
  84. // tags including the namespace <grrrr />.
  85. var HACK = "";
  86. if (window.ActiveXObject) {
  87. xmlobject=new ActiveXObject("Microsoft.XMLDOM");
  88. xmlobject.async=false;
  89. xmlobject.loadXML( xmlstring );
  90. HACK="kuler:";
  91. }
  92. else {
  93. xmlobject = (new DOMParser()).parseFromString(xmlstring, "text/xml");
  94. }
  95. // get a reference to the root-element "rss"
  96. var root = xmlobject.getElementsByTagName('rss')[0];
  97. // get reference to "channel" element
  98. var channels = root.getElementsByTagName("channel");
  99. // now get all "item" tags in the channel
  100. var items = channels[0].getElementsByTagName("item");
  101. if( items.length == 0 ) {
  102. statusMessage( "No results found. Ready." );
  103. return;
  104. }
  105. var myInfo = "" + items.length + " match<span id='kuler_detail'></span>:<br>";
  106. colors = new Array();
  107. for( var itemIndex = 0; itemIndex < items.length; itemIndex++ ) {
  108. var hexColorArray = new Array();
  109. colors[ itemIndex ] = hexColorArray;
  110. var item = items[ itemIndex ];
  111. // in the "item" we have a description, so get that
  112. var themeID = item.getElementsByTagName( HACK + 'themeID' )[0].firstChild.nodeValue;
  113. // we also get the "pubDate" element in the "item"
  114. var title = item.getElementsByTagName( 'title' )[0].firstChild.nodeValue;
  115. var themeSwatches = item.getElementsByTagName( HACK + 'themeSwatches' )[ 0 ];
  116. var swatches = themeSwatches.getElementsByTagName( HACK + 'swatch' );
  117. myInfo = myInfo + "<div style='margin:5px' onclick='applySwatch( " + itemIndex + " );'>";
  118. for( var swatchIndex = 0; swatchIndex < swatches.length; swatchIndex++ ) {
  119. var swatch = swatches[ swatchIndex ];
  120. var hexColor = swatch.getElementsByTagName( HACK + 'swatchHexColor' )[ 0 ].firstChild.nodeValue;
  121. myInfo = myInfo + "<span style='width:5px; background:#" + hexColor + ";'> </span>";
  122. hexColorArray[ swatchIndex ] = hexColor;
  123. }
  124. myInfo = myInfo + "\n";
  125. myInfo = myInfo + title + ": " + themeID + "</div>";
  126. }
  127. statusMessage(myInfo);
  128. }
  129. function applySwatch( index ) {
  130. subStatusMessage("<B>Applying swatch</B>")
  131. // use a delay, so the web view will actually display the above message before
  132. // starting this work, which may take a moment to complete.
  133. setTimeout("applySwatch0( " + index + " )", 10 );
  134. }
  135. var seed = 0;
  136. function applySwatch0( index ) {
  137. document.LR_modelManipulation = true;
  138. var swatches = colors[ index ];
  139. if( swatches == null ) {
  140. return;
  141. }
  142. for( var index = 0; index<coloredElements.length; index++ ) {
  143. var theColor = coloredElements[ index ];
  144. var swatchIndex = ( seed + index ) % swatches.length;
  145. if( theColor == null ) {
  146. break;
  147. }
  148. var hexColor = swatches[ swatchIndex ];
  149. callCallback( "updateModel", theColor, '#' + hexColor );
  150. }
  151. seed = seed + 1;
  152. document.LR_modelManipulation = false;
  153. subStatusMessage("")
  154. }
  155. function getTheme() {
  156. var query = document.getElementById( 'query' ).value;
  157. kulerURL = 'http://kuler.adobe.com/kuler/API/rss/search.cfm?searchQuery=' + query + '&startIndex=0&itemsPerPage=10'
  158. statusMessage( "Searching..." );
  159. getURLContents( kulerURL, parseKulerXML )
  160. }
  161. var kulerOn = false;
  162. function toggleKuler() {
  163. kulerOn = !kulerOn;
  164. var kulerElement = document.getElementById('kuler');
  165. var style = kulerElement.style;
  166. style.display = kulerOn ? '' : 'none';
  167. }
  168. </script>
  169. <table style="z-index: 2;position:absolute;top:10px;right:10px;">
  170. <tr>
  171. <td onclick="toggleKuler()" id="kulerToggler"><img src='$theRoot/kuler_blog_badge.png' width=28 height=28></td>
  172. <td id="kuler" style="background:white; display:none;">
  173. <div style="border:1px solid black; border-bottom:0; padding:5px;">
  174. Query: <input id='query' type='text' name='query' onkeypress="if( event.keyCode == 13 ) { getTheme(); event.keyCode=null; return false; }">
  175. <input type="button" onclick="getTheme(); return false;" name="button" value="Search">
  176. </div>
  177. <div style="border:1px solid black; border-top:0; padding:5px;">
  178. Status:
  179. <span id="kuler_message">Ready.</span>
  180. </div>
  181. </td>
  182. </tr>
  183. </table>
  184. <% end %>
  185. <% end %>
  186. <div id="wrapper_$mySize">
  187. <%
  188. local function fixUrlIfRelative( url )
  189. url = tostring( url ) or ""
  190. if string.find( url, "[a-z]+:" ) then
  191. -- this url starts with something like http: or mailto:, so leave it alone
  192. else
  193. -- this url is probably relative, so we need to tack on theRoot to the beginning
  194. -- of it, so no matter where the page we're currently viewing is placed in the
  195. -- output hierarchy, this link will still point to the same page
  196. url = theRoot .. "/" .. url;
  197. end
  198. return url
  199. end
  200. --[[ Include the identity plate during preview to enable quick live update ]]
  201. local includeIdentityPlate = mode == 'preview' or model.appearance.logo.display
  202. if includeIdentityPlate then
  203. local url = fixUrlIfRelative( model.metadata.homePage.value )
  204. %>
  205. <div id="model.nonCSS.idplateEnabled">
  206. <div class="logo"> <a href="$url"> <img width="<%= getIdentityPlateSize().width %>" height="<%= getIdentityPlateSize().height %>" class="pngDelayDisplay" src="$others/logo.png" alt="Logo"> </a> </div>
  207. </div>
  208. <%
  209. end --[[ End conditionalize identity plate ]]
  210. %>
  211. <% --[[ Page header titles ]] %>
  212. <div id="sitetitle">
  213. <h1 onclick="clickTarget( this, 'metadata.siteTitle.value' );" id="metadata.siteTitle.value" class="textColor">$model.metadata.siteTitle.value</h1>
  214. </div>
  215. <div id="collectionHeader">
  216. <h1 onclick="clickTarget( this, 'metadata.groupTitle.value' );" id="metadata.groupTitle.value" class="textColor">$model.metadata.groupTitle.value</h1>
  217. <p onclick="clickTarget( this, 'metadata.groupDescription.value' );" id="metadata.groupDescription.value" class="textColor">$model.metadata.groupDescription.value</p>
  218. </div>
  219. <% --[[ Main image area ]] %>
  220. <div id="stage2">
  221. <div id="previewFull" class="borderTopLeft borderBottomRight">
  222. <div id="detailTitle" class="detailText">
  223. $image.metadata.title
  224. </div>
  225. <% --[[ Pagination section ]] %>
  226. <div class="detailNav">
  227. <ul>
  228. <lr:Pagination>
  229. <lr:PreviousEnabled>
  230. <li class="previous"> <a class="paginationLinks detailText" href="$link"><%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %></a> </li>
  231. </lr:PreviousEnabled>
  232. <lr:PreviousDisabled>
  233. <li class="previous detailText"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Previous=Previous" %> </li>
  234. </lr:PreviousDisabled>
  235. <li class="index"> <a href="$gridPageLink" class="detailLinks detailText"><%= LOC "$$$/AgWPG/Templates/HTML/output/Index=Index" %></a> </li>
  236. <lr:NextEnabled>
  237. <li class="next"> <a class="paginationLinks detailText" href="$link"><%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %></a> </li>
  238. </lr:NextEnabled>
  239. <lr:NextDisabled>
  240. <li class="next detailText"> <%= LOC "$$$/AgWPG/Templates/HTML/output/Next=Next" %> </li>
  241. </lr:NextDisabled>
  242. </lr:Pagination>
  243. </ul>
  244. </div>
  245. <%
  246. --[[
  247. Logic for centering the image on the page. We've decided to implement a rather complicated
  248. layout system for the image depending on whether it can fit nicely in the same area
  249. occupied by the grid. That coupled with the fact that HTML doesn't center things very
  250. well means its a little harder yet. The solution we adopt is to calculate the left margin
  251. for the image, and then position the element manually.
  252. ]]
  253. local imageBorderWidth = 0
  254. local imgWidth = image.renditions.large.width
  255. local imgHeight = image.renditions.large.height
  256. if model.nonCSS.showImageBorderLarge then
  257. imageBorderWidth = model.nonCSS.imageBorderWidth
  258. end
  259. local gridDefinedWidth = model.nonCSS.numCols * 161 + 1
  260. local imagePlusBorderDefinedWith = 2 * imageBorderWidth + model.photoSizes.large.width + 30
  261. local stageWidth = math.max( gridDefinedWidth, imagePlusBorderDefinedWith )
  262. local previewX = math.floor( math.max( 15, ( stageWidth - imgWidth ) / 2 ) ) - imageBorderWidth
  263. %>
  264. <a href="$gridPageLink">
  265. <div style="margin-left:<%= previewX %>px;">
  266. <%
  267. local pathToANode="parentNode.parentNode"
  268. if model.nonCSS.dropShadows then
  269. pathToANode = "parentNode.parentNode.parentNode.parentNode" %>
  270. <div class="dropShadow">
  271. <div class="inner">
  272. <% end %>
  273. <img src="images/large/<%= image.exportFilename %>.jpg"
  274. class="previewFullImage preview"
  275. id="previewImage"
  276. alt="$image.metadata.title"
  277. <% if mode == 'preview' then %>
  278. width=<%= imgWidth %>
  279. height=<%= imgHeight %>
  280. <% end %>
  281. onclick="var node=<%= pathToANode %>; if( node.click ) { return node.click(); } else { return true; }">
  282. <% if model.nonCSS.dropShadows then %>
  283. </div>
  284. </div>
  285. <% end %>
  286. </div>
  287. </a>
  288. <div style="clear:both; height:5px"></div>
  289. <% --[[ Caption ]] %>
  290. <div id="detailCaption" class="detailText">
  291. $image.metadata.description
  292. </div>
  293. </div>
  294. </div>
  295. <div class="clear">
  296. </div>
  297. <% --[[ Include the page footer]] %>
  298. <% --[[ Contact Info ]] %>
  299. <div id="contact">
  300. <% if mode ~= 'preview' then
  301. local url = fixUrlIfRelative( model.metadata.contactInfo.link ) %>
  302. <a href="<%= url %>"> <p
  303. <% else %>
  304. <p onclick="clickTarget( this, 'metadata.contactInfo.value' );" style="text-decoration: underline;"
  305. <% end %>
  306. class="textColor" id="metadata.contactInfo.value"><%= model.metadata.contactInfo.value %></p>
  307. <% if mode ~= 'preview' then %>
  308. </a>
  309. <% end %>
  310. </div>
  311. <div class="clear">
  312. </div>
  313. </div>
  314. </body>
  315. </html>