0
@@ -1,22 +1,25 @@
0
-<div id="modal_html_rel-wrapper" style="position:relative;display:<%= @nonhtml ? 'block' : 'none' %>;">
0
-  <div id="modal_html_border" style="position:relative; border: 1px solid #666; border-top: 0 none;">
0
-    <div id="modal_html" style="position: relative; width: 300px; height: 145px; padding:17px; border: 8px solid #333; border-top: 0 none; background: #fff url('<%= HmConfig.app[:host] %>stylesheets/images/modal/bg_grey.jpg') repeat-x bottom left;">
0
-      <div style="margin:0 auto; width:260px;" id="savehomemarks_form_wrapper">
0
-        <div style="margin-bottom:8px; color:#000; font-size:14px; font-family:'Lucida Grande',Tahoma,sans-serif;">Type a name for the bookmark, <br />and choose where to keep it.</div>
0
-        <% form_tag( save_link_url(:only_path => false, :uuid => @user.uuid), {:id => 'savehomemarks_form'} ) do %>
0
-          <div>
0
-            <%= hidden_field_tag 'bookmark[url]', (@nonhtml ? @bookmark_url : 'from_referer'), :id => 'hm_bookmark_url' %>
0
-            <%= text_field_tag 'bookmark[name]', nil, :id => 'hm_bookmark_name', :style => "width:100%; margin-bottom:3px; font-size:14px; font-family:'Lucida Grande',Tahoma,sans-serif;" %>
0
-            <%= select_tag 'box[id]', option_groups_from_collection_for_select(@user.boxes_for_option_group, :boxes, :col_name, :id, :title), :id => 'hm_bookmark_box_select', :style => "width:100%;" %>            
0
-          </div>
0
-          <div style="text-align:right;margin-top:12px;">
0
-            <span id="modal_button_save"><input type="image" src="<%= HmConfig.app[:host] %>stylesheets/images/page/nil.png" id="hm_modal_submit" onclick="<%= render_bookmarklet_save_button %>" style="width:84px;height:26px;" /></span>
0
-            <span id="modal_button_cancel" onclick="<%= @nonhtml ? "location.href = '#{@bookmark_url}'" : 'destroyModal();' %>"></span>
0
-          </div>
0
-        <% end %>
0
+
0
+  <div id="modal_html_rel-wrapper" style="position:relative;display:<%= @nonhtml ? 'block' : 'none' %>;">
0
+    <div id="modal_html_border" style="position:relative; border: 1px solid #666; border-top: 0 none;">
0
+      
0
+      <div id="modal_html" style="position: relative; width: 300px; height: 145px; padding:17px; border: 8px solid #333; border-top: 0 none; background: #fff url('<%= HmConfig.app[:host] %>stylesheets/images/modal/bg_grey.jpg') repeat-x bottom left;">
0
+        <div style="margin:0 auto; width:260px;" id="savehomemarks_form_wrapper">
0
+          <div style="margin-bottom:8px; color:#000; font-size:14px; font-family:'Lucida Grande',Tahoma,sans-serif;">Type a name for the bookmark, <br />and choose where to keep it.</div>
0
+          <% form_tag( save_link_url(:only_path => false, :uuid => @user.uuid), {:id => 'savehomemarks_form'} ) do %>
0
+            <div>
0
+              <%= hidden_field_tag 'bookmark[url]', (@nonhtml ? @bookmark_url : 'from_referer'), :id => 'hm_bookmark_url' %>
0
+              <%= text_field_tag 'bookmark[name]', nil, :id => 'hm_bookmark_name', :style => "width:100%; margin-bottom:3px; font-size:14px; font-family:'Lucida Grande',Tahoma,sans-serif;" %>
0
+              <%= select_tag 'box[id]', option_groups_from_collection_for_select(@user.boxes_for_option_group, :boxes, :col_name, :id, :title), :id => 'hm_bookmark_box_select', :style => "width:100%;" %>            
0
+            </div>
0
+            <div style="text-align:right;margin-top:12px;">
0
+              <span id="modal_button_save"><input type="image" src="<%= HmConfig.app[:host] %>stylesheets/images/page/nil.png" id="hm_modal_submit" onclick="<%= render_bookmarklet_save_button %>" style="width:84px;height:26px;" /></span>
0
+              <span id="modal_button_cancel" onclick="<%= @nonhtml ? "location.href = '#{@bookmark_url}'" : 'destroyModal();' %>"></span>
0
+            </div>
0
+          <% end %>
0
+        </div>
0
       </div>
0
     </div>
0
+    
0
+    <div id="modal_html_top" style="position:absolute; top:0; left:0; width:352px; height:9px; background: url('<%= HmConfig.app[:host] %>javascripts/modal_assets/modal_top.png') repeat-x; z-index:995;"></div>
0
   </div>
0
-  <div id="modal_html_top" style="position:absolute; top:0; left:0; width:352px; height:9px; background: url('<%= HmConfig.app[:host] %>javascripts/modal_assets/modal_top.png') repeat-x; z-index:995;"></div>
0
-</div>

0
@@ -19,7 +19,7 @@
0
     Builder.dump();
0
   </script>
0
 </head>
0
-<body id="body">
0
+<body>
0
   
0
   <div id="site_wrapper">
0
     
0
@@ -53,7 +53,6 @@
0
     </div>
0
     
0
   </div>
0
-  
0
   
0
 </body>
0
 </html>

0
@@ -15,14 +15,6 @@
0
   
0
   editLinks: function(event) {
0
     var modal = new Modal('bookmarks');
0
-    // :before => "this.blur(); setupModal(#{box.id})",
0
-    // :loading => "Element.show('modal_progress')" )
0
-    // 
0
-    // Data from request:
0
-    // 
0
-    // page.replace_html 'modal_html_rel-wrapper', :partial => 'edit_links'
0
-    // page.hide :modal_progress
0
-    // page.visual_effect :slide_down, 'modal_html_rel-wrapper', :duration => 0.4, :queue => {:position => 'end', :scope => "boxid_#{@box.id}"}
0
   },
0
   
0
   initEvents: function() {

0
@@ -1,40 +1,55 @@
0
 
0
 var HomeMarksModal = Class.create(HomeMarksUtilities,{
0
   
0
-  initialize: function(contents) {
0
+  initialize: function() {
0
     this.build();
0
-    this.contents = contents || 'misc' // ['box','bookmark']
0
     this.mask = $('modalmask'); 
0
     this.progress = $('modal_progress');
0
-    this.wrapper = $('modal_html_ap-wrapper');
0
-    this.content = $('modal_html_rel-wrapper');
0
+    this.apWrapper = $('modal_html_ap-wrapper');
0
+    this.relWrapper = $('modal_html_rel-wrapper');
0
+    this.topShadow = $('modal_html_top');
0
+    this.content = $('modal_html');
0
+    this.contentFor = 'misc'; // ['box','bookmark']
0
     this.queue = {position:'end', scope:'modalscope'};
0
   },
0
   
0
-  miscContents: function() { return this.contents == 'misc'; },
0
-  boxContents: function() { return this.contents == 'box'; },
0
-  bookmarkContents: function() { return this.contents == 'bookmark'; },
0
-  
0
   build: function() {
0
     if (!$('modalmask')) {
0
-      var body = $('body');
0
+      var body = $$('body').first();
0
       var maskHTML = DIV({id:'modalmask',style:'display:none;'},[DIV({id:'modal_progress',style:'display:none;',onclick:'location.reload();'})]);
0
-      var modalHTML = DIV({id:'modal_html_ap-wrapper'},[DIV({id:'modal_html_rel-wrapper',style:'display:none;'})]);
0
+      var modalHTML = DIV({id:'modal_html_ap-wrapper'},[
0
+        DIV({id:'modal_html_rel-wrapper',style:'display:none;'},[
0
+          DIV({id:'modal_html_border'},[
0
+            DIV({id:'modal_html'})
0
+          ]),
0
+          DIV({id:'modal_html_top'})
0
+        ])]
0
+      );
0
       body.insert({top:modalHTML});
0
       body.insert({top:maskHTML});
0
     };
0
   },
0
-  
0
-  create: function() {
0
-    this.center();
0
+    
0
+  show: function(contentFor) {
0
+    this.contentFor = contentFor;
0
     this.toggleMask('on');
0
     this.toggleProgress('on');
0
     this.toggleObservers('on');
0
+    this.updateContent();
0
+    this.toggleProgress('off');
0
+    this.relWrapper.slideDown({duration:0.4, queue:this.queue});
0
     // document.stopObserving('keypress', actionAreaHelper);
0
     // if (this.action_bar().hasClassName('barout')) { toggleActionArea('inbox'); }
0
   },
0
   
0
-  destroy: function(boxid) {
0
+  updateContent: function() {
0
+    this.topShadow.setStyle({width:this.dimensions().topWidth+'px'});
0
+    this.content.setStyle({width:this.dimensions().contentWidth, height:this.dimensions().contentHeight});
0
+    this.content.update('<div>Hello Modal</div>');
0
+    this.center();
0
+  },
0
+  
0
+  hide: function(boxid) {
0
     this.toggleObservers('off');
0
     this.toggleProgress('off');
0
     this.toggleMask('off');
0
0
0
0
@@ -42,26 +57,19 @@
0
   },
0
   
0
   center: function() {
0
-    this.centerMask();
0
-    this.centerModal();
0
-  },
0
-  
0
-  centerMask: function() {
0
     this.mask.setStyle({height: this.pageSize().height + 'px'});
0
     this.progress.setStyle({top: (this.scroll().top + 60) + 'px'});
0
-  },
0
-  
0
-  centerModal: function() {
0
-    left = (( this.pageSize().width - this.width() ) / 2).ceil();
0
+    var total = this.pageSize().width - this.dimensions().topWidth;
0
+    var left = (total/2).ceil();
0
     if (left < 0) left = 0;
0
-    this.wrapper.setStyle({left: left+'px'});
0
+    this.apWrapper.setStyle({left:left+'px'});
0
   },
0
   
0
-  width: function() {
0
-    switch (this.contents) { 
0
-      case 'misc' : return 450;
0
-      case 'box' : return 652; 
0
-      case 'bookmark' : return 352; 
0
+  dimensions: function() {
0
+    switch (this.contentFor) { 
0
+      case 'misc'     : return { topWidth:452, contentWidth:'400px', contentHeight:'auto' };
0
+      case 'box'      : return { topWidth:652, contentWidth:'600px', contentHeight:'300px' }; 
0
+      case 'bookmark' : return { topWidth:352, contentWidth:'300px', contentHeight:'145px' }; 
0
     }
0
   },
0
   
0
@@ -71,7 +79,7 @@
0
     }
0
     else {
0
       // May not need visible check.
0
-      if (this.content.visible()) { this.content.slideUp({duration:0.4, queue:this.queue}); };
0
+      if (this.relWrapper.visible()) { this.relWrapper.slideUp({duration:0.4, queue:this.queue}); };
0
       this.mask.fade({duration:0.2, queue:this.queue});
0
     };
0
   },
0
@@ -99,20 +107,6 @@
0
     if (event.keyCode == Event.KEY_ESC) { this.destroy(); };
0
   }
0
   
0
-  // hideModal: function(boxid) {
0
-  //   boxid = (boxid == null) ? 'bookmarklet' : boxid;
0
-  //   Event.stopObserving(document, 'keypress', respondtoKeypress);
0
-  //   Effect.SlideUp(modalContent, {duration:0.4, queue:{position:'end', scope:'boxid_' + boxid}});
0
-  //   Effect.Appear(modalProgress, {duration:0.2, from:0.0, to:0.9, queue:{position:'end', scope:'boxid_' + boxid}});
0
-  // },
0
-  // 
0
-  // destroyModalMask: function(boxid) {
0
-  //   boxid = (boxid == null) ? 'bookmarklet' : boxid;
0
-  //   Event.stopObserving(window, 'resize', centerStuff);
0
-  //   Event.stopObserving(window, 'scroll', centerStuff);
0
-  //   Effect.Fade(modalMask, {duration:0.2, queue:{position:'end', scope:'boxid_' + boxid}});
0
-  // },
0
-  // 
0
   // goHere: function() {
0
   //   window.location.reload();
0
   // }

0
@@ -407,17 +407,29 @@
0
 #modal_html_rel-wrapper { position:relative; }
0
 #modal_html_border      { position:relative; border: 1px solid #666; border-top: 0 none; }
0
 #modal_html_top         { position:absolute; top:0; left:0; 
0
-                          width:652px; height:9px; background: url('/javascripts/modal_assets/modal_top.png') repeat-x; z-index:210; }
0
-#modal_html             { position: relative; width: 600px; height: 300px; padding:17px; border: 8px solid #333; border-top: 0 none;
0
+                          height:9px; background: url('/javascripts/modal_assets/modal_top.png') repeat-x; z-index:210; }
0
+#modal_html             { position: relative; padding:17px; border: 8px solid #333; border-top: 0 none;
0
                           background: #fff url('/stylesheets/images/modal/bg_grey.jpg') repeat-x bottom left; }
0
 
0
-#modal_html.modalbg_white,    #modal_html.modalbg_timberwolf,   #modal_html.modalbg_black           { background-image: url('/stylesheets/images/modal/bg_grey.jpg') ; }
0
-#modal_html.modalbg_aqua,     #modal_html.modalbg_sky_blue,     #modal_html.modalbg_cerulian        { background-image: url('/stylesheets/images/modal/bg_blue.jpg') ; }
0
-#modal_html.modalbg_melon,    #modal_html.modalbg_salmon,       #modal_html.modalbg_red             { background-image: url('/stylesheets/images/modal/bg_red.jpg') ; }
0
-#modal_html.modalbg_limeade,  #modal_html.modalbg_spring_green, #modal_html.modalbg_yellow_green    { background-image: url('/stylesheets/images/modal/bg_green.jpg') ; }
0
-#modal_html.modalbg_lavender, #modal_html.modalbg_wistera,      #modal_html.modalbg_violet          { background-image: url('/stylesheets/images/modal/bg_purple.jpg') ; }
0
-#modal_html.modalbg_postit,   #modal_html.modalbg_yellow,       #modal_html.modalbg_orange          { background-image: url('/stylesheets/images/modal/bg_orange.jpg') ; }
0
-#modal_html.modalbg_bisque,   #modal_html.modalbg_apricot,      #modal_html.modalbg_raw_sienna      { background-image: url('/stylesheets/images/modal/bg_orange.jpg') ; }
0
+
0
+/*
0
+
0
+#ajaxforms_wrapper      { width:450px; margin: 0 auto; position:relative; border: 1px solid #666; border-top: 0 none; }
0
+#ajaxforms_top          { position:absolute; top:0; left:0; 
0
+                          width:452px; height:9px; background: url('/javascripts/modal_assets/modal_top.png') repeat-x; z-index:210; }
0
+#ajaxforms              { width:400px; padding:17px; border: 8px solid #333; border-top: 0 none; color:#000; 
0
+                          background: #fff url('/stylesheets/images/modal/bg_grey.jpg') repeat-x bottom left; }
0
+
0
+
0
+*/
0
+
0
+#modal_html.white,    #modal_html.timberwolf,   #modal_html.black           { background-image: url('/stylesheets/images/modal/bg_grey.jpg') ; }
0
+#modal_html.aqua,     #modal_html.sky_blue,     #modal_html.cerulian        { background-image: url('/stylesheets/images/modal/bg_blue.jpg') ; }
0
+#modal_html.melon,    #modal_html.salmon,       #modal_html.red             { background-image: url('/stylesheets/images/modal/bg_red.jpg') ; }
0
+#modal_html.limeade,  #modal_html.spring_green, #modal_html.yellow_green    { background-image: url('/stylesheets/images/modal/bg_green.jpg') ; }
0
+#modal_html.lavender, #modal_html.wistera,      #modal_html.violet          { background-image: url('/stylesheets/images/modal/bg_purple.jpg') ; }
0
+#modal_html.postit,   #modal_html.yellow,       #modal_html.orange          { background-image: url('/stylesheets/images/modal/bg_orange.jpg') ; }
0
+#modal_html.bisque,   #modal_html.apricot,      #modal_html.raw_sienna      { background-image: url('/stylesheets/images/modal/bg_orange.jpg') ; }
0
 
0
 
0