Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

The Dresden Files RPG

Author: E221b

Slug: dfrpg_bje

System: The Dresden Files

DST Source Code

HTML Template

<div class="wrapper">  

<!--  <div class="background_image"><img src="http://cdn.obsidianportal.com/assets/194232/Dresden_Files_Logo.gif" alt=""/></div> -->
  
  <div class="main">	 
    <div class="left_column">      
	  <div class="portrait_holder"><span class="dsf dsf_avatar_image"></span></div>
        
	  <div class="section_left">
	    <div class="section_head">Skills</div>
		<div class="row_body">
		<table>
			<tr>
				<td>
					<span class="row_title bold">Skill:</span>
				</td>
				<td>
					<span class="row_title bold">Adjective (+Rank)</span>
				</td>
			</tr>		
			<tr>
				<td>
					<span class="skill">Athletics:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_athletics"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Alertness: </span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_alertness"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Burglary:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_burglary"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Contacts:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_contacts"></span>
				</td>
			</tr>			
			<tr>
				<td>
					<span class="skill">Conviction:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_conviction"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Craftsmanship:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_craftsmanship"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Deceit:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_deceit"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Discipline:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_discipline"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Driving:</span>
				</td>
				<td>
					 <span class="skill_rank dsf dsf_driving"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Empathy:</span>
				</td>
				<td>
					  <span class="skill_rank dsf dsf_empathy"></span>
				</td>
			</tr>	
			<tr>
				<td>
					 <span class="skill">Endurance:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_endurance"></span>
				</td>
			</tr>
			<tr>
				<td>
					 <span class="skill">Fists:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_fists"></span>
				</td>
			</tr>	
			<tr>
				<td>
					  <span class="skill">Guns:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_guns"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Intimidation:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_intimidation"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Investigation:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_investigation"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Lore:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_lore"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Might:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_might"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Performance:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_performance"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Presence:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_presence"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Rapport:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_rapport"></span>
				</td>
			</tr>
			<tr>
				<td>
					<span class="skill">Resources:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_resources"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Scholarship:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_scholarship"></span>
				</td>
			</tr>		
			<tr>
				<td>
					<span class="skill">Stealth:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_stealth"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Survival:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_survival"></span>
				</td>
			</tr>	
			<tr>
				<td>
					<span class="skill">Weapons:</span>
				</td>
				<td>
					<span class="skill_rank dsf dsf_weapons"></span>
				</td>
			</tr>			
		</table>
		</div>
	  </div>
	  
	  <div class="section_left">
	    <div class="section_head">Stress</div>
		<div class="row_title">
		  <span class="stress_label_first">1</span>
		  <span class="stress_label">2</span>
		  <span class="stress_label">3</span>
		  <span class="stress_label">4</span>
		  <span class="stress_label">5</span>
		  <span class="stress_label">6</span>
		  <span class="stress_label">7</span>
		  <span class="stress_label">8</span>
		</div>
		<div class="row_title">
		  <span class="stress_type bold">Physical (Endurance)</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_physical"></span>
		</div>
		<div class="row_title">
		  <span class="stress_type bold">Mental (Conviction)</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_mental"></span>
		</div>
		<div class="row_title">
		  <span class="stress_type bold">Social (Presence)</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_social"></span>
		</div>
<BR>
		<div class="row_title">
		  <span class="stress_type italic">Toughness (Catch)</span>
		  <span class="readonly pipsRange_6 dsf dsf_stress_toughness"></span>
		</div>
		<div class="row_title">
		  <span class="stress_type bold">Hunger</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_hunger"></span>
		</div>
	  </div>
	  
	  <div class="section_left">
	    <div class="section_head">Power Level</div>
		<div class="row_body">
		  <span class="power_level bold space_below">Power Level:</span>
		  <span class="power_level_value dsf dsf_power_level"></span><br/>
		  <span class="power_level bold">Refresh Spent:</span>
		  <span class="power_level_value dsf dsf_refresh_spent"></span><br/>
		  <span class="power_level bold">Starting Refresh:</span>
		  <span class="power_level_value dsf dsf_refresh_start"></span><br/>
		  <span class="power_level bold">Current Refresh:</span>
		  <span class="power_level_value dsf dsf_refresh_current"></span>
		</div>
	  </div>
	    
	  <div class="section_left">
	    <div class="section_head">Notes<a class="interface listAdd" title="Add Note" onclick="dfrpg_bje_getElementsByClassName('list_notes')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		<div class="list_notes listColumns_1">
		  <div class="template">
		    <div class="row_body">
		      <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_note_ note hanging_indent"></span>			  
		    </div>
		  </div>
		</div>
	  </div>
	  
	  <div class-"section_left">
	    <div class="row_title center">
		  <span class="dst_author_label bold small_caps">Sheet by:</span>
		  <span class="dsf dsf_dst_author dst_author"></span>
		</div>
	  </div> 
	
	</div>
	  
	<div class="right_column">
      <div class="page_head">      
	    <img src="http://cdn.obsidianportal.com/assets/194232/Dresden_Files_Logo.gif"  height="75" width="300" alt=""/>
	  </div>
	  <div class="section_right">
	    <div class="row_body big">
		  <span class="basic_info bold">Name:</span>
		  <span class="basic_info_value space_below dsf dsf_name"></span>
		</div>
		<div class="row_body">
		  <span class="basic_info bold">Campaign:</span>
		  <span class="basic_info_value dsf dsf_campaign"></span><br/>
		  <span class="basic_info bold">Player:</span>
		  <span class="basic_info_value dsf dsf_player"></span><br/>
		</div>
      </div>
	  
	  <div class="section_right">
	    <div class="section_head">Aspects</div>
		<div class="row_title bold small_caps">High Concept:</div>
		<div class="row_body"><span class="aspect dsf dsf_aspect_high_concept"></span></div>
		<div class="row_title bold small_caps">Trouble:</div>
        <div class="row_body"><span class="aspect dsf dsf_aspect_trouble"></span></div>
		<div class="row_title bold small_caps">Other Aspects:<a class="interface listAdd" title="Add Aspect" onclick="dfrpg_bje_getElementsByClassName('list_aspects')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		  <div class="list_aspects listColumns_1">
		    <div class="template">
		      <div class="row_body">
			    <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
				<a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
				<a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
				<span class="dsf dsf_aspect_ aspect_other hanging_indent"></span>
			  </div>
			</div>
		  </div>
		</div>
	  
	  <div class="section_right">
	    <div class="section_head">Stunts & Powers</div>
		<div class="row_title bold small_caps underline">
		  <span class="stunt_cost bold">Cost</span>
		  <span class="stunt bold">Ability</span><a class="interface listAdd" title="Add Stunt" onclick="dfrpg_bje_getElementsByClassName('list_stunts')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a>
		</div>
		<div class="list_stunts listColumns_2">
		  <div class="template">
		    <div class="row_body">
		      <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_stunt_cost_ stunt_cost"></span>
			  <span class="dsf dsf_stunt_ stunt"></span>
		    </div>
		  </div>
		</div>
	  </div>
	
 	  <div class="section_right">
	    <div class="section_head">Consequences</div>
	    <div class="row_title bold small_caps underline">
		  <span class="consequence_type">Type</span>
		  <span class="consequence_category">P/M/S</span>
		  <span class="consequence_stress">Stress</span>
		  <span class="consequence_used">Used?</span>
		  <span class="consequence_aspect">Aspect</span></a>
		</div>
		<div class="row_body">
		  <span class="consequence_type">Mild</span>
		  <span class="consequence_category">Any</span>
		  <span class="consequence_stress">-2</span>
		  <span class="consequence_used dsf dsf_consequence_mild_used checkbox"></span>
		  <span class="consequence_aspect dsf dsf_consequence_mild_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="consequence_type">Moderate</span>
		  <span class="consequence_category">Any</span>
		  <span class="consequence_stress">-4</span>
		  <span class="consequence_used dsf dsf_consequence_moderate_used checkbox"></span>
		  <span class="consequence_aspect dsf dsf_consequence_moderate_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="consequence_type">Severe</span>
		  <span class="consequence_category">Any</span>
		  <span class="consequence_stress">-6</span>
		  <span class="consequence_used dsf dsf_consequence_severe_used checkbox"></span>
		  <span class="consequence_aspect dsf dsf_consequence_severe_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="dsf dsf_consequence_other_type_1 consequence_type"></span>
		  <span class="dsf dsf_consequence_other_category_1 consequence_category"></span>
		  <span class="dsf dsf_consequence_other_stress_1 consequence_stress"></span>
		  <span class="dsf dsf_consequence_other_used_1 consequence_used checkbox"></span>
		  <span class="dsf dsf_consequence_other_aspect_1 consequence_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="dsf dsf_consequence_other_type_2 consequence_type"></span>
		  <span class="dsf dsf_consequence_other_category_2 consequence_category"></span>
		  <span class="dsf dsf_consequence_other_stress_2 consequence_stress"></span>
		  <span class="dsf dsf_consequence_other_used_2 consequence_used checkbox"></span>
		  <span class="dsf dsf_consequence_other_aspect_2 consequence_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="dsf dsf_consequence_other_type_3 consequence_type"></span>
		  <span class="dsf dsf_consequence_other_category_3 consequence_category"></span>
		  <span class="dsf dsf_consequence_other_stress_3 consequence_stress"></span>
		  <span class="dsf dsf_consequence_other_used_3 consequence_used checkbox"></span>
		  <span class="dsf dsf_consequence_other_aspect_3 consequence_aspect"></span>
		</div>
		<div class="row_body">
		  <span class="consequence_type">Extreme</span>
		  <span class="consequence_category">Any</span>
		  <span class="consequence_stress">-8</span>
		  <span class="consequence_used dsf dsf_consequence_extreme_used checkbox"></span>
		  <span class="consequence_aspect italic">Replace a Permanent</span>
		</div>
	  </div>
	    
	  <div class="section_right">
	    <div class="section_head">Spellcasting</div>
		<div class="row_title bold space_below small_caps space_above">Elements & Specializations:<a class="interface listAdd" title="Add Element or Specialization" onclick="dfrpg_bje_getElementsByClassName('list_specializations')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		<div class="list_specializations listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_specialization_ spellcasting hanging_indent"></span>
			</div>
		  </div>
		</div>
		
		<div class="row_title bold space_below small_caps space_above">Focus Items:<a class="interface listAdd" title="Add Focus Item" onclick="dfrpg_bje_getElementsByClassName('list_focus_items')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		<div class="list_focus_items listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif"height="16" width="16"  alt="X"/></a>
			  <span class="dsf dsf_focus_item_ spellcasting hanging_indent"></span>			  
			</div>
		  </div>
		</div>
		
		<div class="row_title bold space_below small_caps space_above">Rotes:<a class="interface listAdd" title="Add Rotes" onclick="dfrpg_bje_getElementsByClassName('list_rotes')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		<div class="list_rotes listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_rote_ spellcasting hanging_indent"></span>			  
			</div>
		  </div>
		</div>
		
		<div class="row_title bold space_below small_caps space_above">Enchanted Items:<a class="interface listAdd" title="Add Enchanted Item" onclick="dfrpg_bje_getElementsByClassName('list_enchanted_items')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
		<div class="list_enchanted_items listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_focus_item_ spellcasting hanging_indent"></span>			  
			</div>
		  </div>
		</div>
		
		<div class="row_title bold small_caps space_above">Potions:<a class="interface listAdd" title="Add Potion" onclick="dfrpg_bje_getElementsByClassName('list_potions')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
        <div class="row_body">
		  <span class="potion_slots_head bold small_caps space_below">Open Slots:</span>
		  <span class="dsf dsf_potion_slots potion_slots"></span>
		</div>
		<div class="list_potions listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_enchanted_item_ spellcasting hanging_indent"></span>			  
			</div>
		  </div>
		</div>
		
		<div class="row_title bold small_caps space_above">Other Spellcasting Notes:<a class="interface listAdd" title="Add Other Spellcasting Notes" onclick="dfrpg_bje_getElementsByClassName('list_spellcasting_notes')[0].addItem();"><img src="http://cdn.obsidianportal.com/assets/193992/plus_icon.gif" height="16" width="16" alt="+"/></a></div>
        <div class="list_spellcasting_notes listColumns_1">
		  <div class="template">
			<div class="row_body">
			  <a class="listDemote interface" title="Move this item down"><img src="http://cdn.obsidianportal.com/assets/193991/down_icon.gif" height="16" width="16" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://cdn.obsidianportal.com/assets/193993/up_icon.gif" height="16" width="16" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://cdn.obsidianportal.com/assets/193990/delete_icon.gif" height="16" width="16" alt="X"/></a>
			  <span class="dsf dsf_spellcasting_notes_ spellcasting hanging_indent"></span>			  
			</div>
		  </div>
		</div>		
	  </div>	 
	</div>

	<div class="full_page">
	  <div class="section_full">
        <div class="section_head">Biography</div>
	    <div class="row_body">
		  <span class="dsf dsf_bio"></span>
		</div>
	  </div>
	</div>
	
	<!-- <img src="http://cdn.obsidianportal.com/assets/192643/parchment.jpg" alt=""/> -->
  
  </div>  
  </div>

CSS

/****************************
/****************************
* This is the CSS for the DST.
* Copy and paste this directly into the CSS textarea on obsidianportal.com
*****************************/



/****************************************
*****************************************
* Layout Classes
*****************************************
****************************************/

/****************************
* Wrapper
*****************************/
.ds_dfrpg_bje .wrapper{
  position:relative;
}

/****************************
* Main (Page Frame)
*****************************/
.ds_dfrpg_bje .main {
  width: 730px;
  display:block;
  margin-top: 0px;
  margin-bottom: 0px;
  float: left;
  background-image:url('http://cdn.obsidianportal.com/assets/192643/parchment.jpg');
}

/****************************
* Background Image
*****************************/
.ds_dfrpg_bje .background_image {
  position:relative; 
  margin-bottom:0px; 
  z-index:0;
}

/****************************
* Left Column
*****************************/
.ds_dfrpg_bje .left_column {
  width: 260px;
  margin-top: 10px;
  margin-left: 20px;
  float: left;  
}

/****************************
* Right Column
*****************************/
.ds_dfrpg_bje .right_column {
  width: 420px;
  margin-top: 10px;
  margin-right: 20px;
  float: right;
  clear: right;
}

/****************************
* Full Page Column (Biography)
*****************************/
.ds_dfrpg_bje .full_page {
  width: 730px;
  margin-top: 10px;
  margin-left: 20px;
  float: left;
}

/****************************
* Portrait Holder
*****************************/
.ds_dfrpg_bje .portrait_holder {
  border: 2px solid #000;
  padding: 2px;
  width: 256px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
  -moz-border-radius: 10px; -webkit-border-radius: 10px; 
}

/****************************
* Title (Image)
*****************************/
.ds_dfrpg_bje .page_head {
  margin-top: 25px;
  margin-bottom: 20px;
  text-align: center;
}

/****************************
* Section Box - Left Column
*****************************/
.ds_dfrpg_bje .section_left {
  border: 2px solid #000;
  padding: 10px;
  width: 240px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
  -moz-border-radius: 10px; -webkit-border-radius: 10px; 
}

/****************************
* Section Box - Right Column
*****************************/
.ds_dfrpg_bje .section_right {
  border: 2px solid #000;
  padding: 10px;
  width: 400px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
  -moz-border-radius: 10px; -webkit-border-radius: 10px; 
}

/****************************
* Section Box - Full Page (Biography)
*****************************/
.ds_dfrpg_bje .section_full {
  border: 2px solid #000;
  padding: 10px;
  width: 670px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
  -moz-border-radius: 10px; -webkit-border-radius: 10px; 
}

/****************************
* Skill Name
*****************************/
.ds_dfrpg_bje .skill {
  display:inline-block;
  vertical-align:top;
}

/****************************
* Skill Rank
*****************************/
.ds_dfrpg_bje .skill_rank {
  display:inline-block;
  vertical-align:top;
  width: 100px;
  margin-left: 5px;
}

/****************************
* Stress Numbering Labels
*****************************/
.ds_dfrpg_bje .skill_label {
  position:relative;
  float:right;
  width: 15px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Stress Numbering Labels - Last
*****************************/
.ds_dfrpg_bje .skill_label_last {
  position:relative;
  float:right;
  margin-right: 9px;
  width: 13px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Stress Type
*****************************/
.ds_dfrpg_bje .stress_type {
  width: 115px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Stress First Number Label
*****************************/
.ds_dfrpg_bje .stress_label_first {
  width: 11px;
  position: relative;
  margin-left: 122px;
  display:inline-block;
  vertical-align:top;
  text-align: center;
}

/****************************
* Stress Numbering Labels
*****************************/
.ds_dfrpg_bje .stress_label {
  width: 11px;
  display:inline-block;
  vertical-align:top;
  text-align: center;
}

/****************************
* Power Level label
*****************************/
.ds_dfrpg_bje .power_level {
  width: 110px;
  display:inline-block;
  vertical-align:top;
  }

/****************************
* Power Level Values
*****************************/
.ds_dfrpg_bje .power_level_value {
  width: 120px;
  position: relative;
  margin-left: 0px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Notes (Full column)
*****************************/
.ds_dfrpg_bje .note {
  display:inline-block;
  margin:0px 0px 1px 0px;
  min-height:16px;
  width:195px;
}

/****************************
* Basic Info label
*****************************/
.ds_dfrpg_bje .basic_info {
  width: 75px;
  display:inline-block;
  vertical-align:top;
  }

/****************************
* Basic Info Values
*****************************/
.ds_dfrpg_bje .basic_info_value {
  width: 320px;
  position: relative;
  margin-left: 0px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Aspect Name (Full column)
*****************************/
.ds_dfrpg_bje .aspect {
  display:inline-block;
  margin:0px 0px 1px 10px;
  min-height:16px;
  width:385px;
}

/****************************
* Aspect Name (With List controls)
*****************************/
.ds_dfrpg_bje .aspect_other {
  display:inline-block;
  margin:0px 0px 1px 10px;
  min-height:16px;
  width:345px;
}

/****************************
* Stunt & Power Cost
*****************************/
.ds_dfrpg_bje .stunt_cost {
  width:30px;
  display:inline-block;
  vertical-align:top;
  text-align: center;
}

/****************************
* Stunt & Power Name
*****************************/
.ds_dfrpg_bje .stunt {
  position:relative;
  width: 300px;
  display:inline-block;
  vertical-align:top;
  margin:0px 0px 1px 0px;
  min-height:16px;
}

/****************************
* Consequence Type
*****************************/
.ds_dfrpg_bje .consequence_type {
  width: 60px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Consequence Category (P/M/S)
*****************************/
.ds_dfrpg_bje .consequence_category {
  position: relative;
  margin-left: 0px;
  width: 50px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Consequence Stress
*****************************/
.ds_dfrpg_bje .consequence_stress {
  position: relative;
  margin-left: 0px;
  width: 35px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Consequence Used?
*****************************/
.ds_dfrpg_bje .consequence_used {
  position: relative;
  margin-left: 0px;
  width: 30px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Consequence Aspect
*****************************/
.ds_dfrpg_bje .consequence_aspect {
  position: relative;
  margin-left: 0px;
  width: 170px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Spellcasting Notes
*****************************/
.ds_dfrpg_bje .spellcasting {
  display:inline-block;
  margin:0px 0px 1px 10px;
  min-height:16px;
  width:345px;
}

/****************************
* Potion Slots Header
*****************************/
.ds_dfrpg_bje .potion_slots_head {
  display:inline-block;
  vertical-align:top;
  margin-left: 10px;
  width:90px;
}

/****************************
* Potion Slots
*****************************/
.ds_dfrpg_bje .potion_slots {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width:75px;
}

/****************************
* Potion Name
*****************************/
.ds_dfrpg_bje .potion {
  display:inline-block;
  vertical-align:top;
  margin-left: 10px;
  width:90px;
}

/****************************
* Potion Duration
*****************************/
.ds_dfrpg_bje .potion_duration {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width:60px;
}

/****************************
* Potion Effect
*****************************/
.ds_dfrpg_bje .potion_effect {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width:190px;
}

/****************************
* Biography (Full column)
*****************************/
.ds_dfrpg_bje .biography {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width: 390px;
}

/****************************
* "Sheet By" label (Full column)
*****************************/
.ds_dfrpg_bje .dst_author_label {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width: 75px;
}

/****************************
* "Sheet By" Value
*****************************/
.ds_dfrpg_bje .dst_author {
  display:inline-block;
  vertical-align:top;
  margin-left: 0px;
  width: 125px;
}



/****************************************
*****************************************
* Pips Interface Styles
*****************************************
****************************************/

/****************************
* Pips - 6 (Toughness Stress)
*****************************/
.ds_dfrpg_bje .pipsRange_6 {
  position:relative;
  margin-left: 0px;
  z-index:2;
  top:1px;
  width:91px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Pips - 7 (Skills)
*****************************/
.ds_dfrpg_bje .pipsRange_7 {
  position:relative;
  z-index:2;
  float:right;
  margin-right: 10px;
  top:1px;
  width:106px;
  display:inline-block;
  vertical-align:top;
}

/****************************
* Pips - 8 (Stress)
*****************************/
.ds_dfrpg_bje .pipsRange_8 {
  position: relative;
  margin-left: 0px;
  z-index:2;
  top:1px;
  width:121px;
  display:inline-block;
  vertical-align:top;
}



/****************************************
*****************************************
* List Interface Styles
*****************************************
****************************************/

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listAdd{
	float:right;
	cursor:pointer;
	text-decoration:none;
	font-size: 1em;
	color:#776655;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listAdd:hover{
	color:#AA9988;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listDelete{
	float:right;
	color:#AA5544;
	cursor:pointer;
	letter-spacing:-1px;
	text-decoration:none;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listDelete:hover{
	color:#CC7766;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listPromote{
	float:right;
	cursor:pointer;
	letter-spacing:-1px;
	text-decoration:none;
	color:#776655;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listPromote:hover{
	color:#AA9988;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listDemote{
	float:right;
	cursor:pointer;
	text-decoration:none;
	color:#776655;
}

/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .listDemote:hover{
	color:#AA9988;
}
/****************************
* Pips - 8 (Stress)
*****************************/
div.ds_dfrpg_bje .template{
	display:none;
}



/****************************************
*****************************************
* Font & Formatting Classes
*****************************************
****************************************/

/****************************
* Click to edit Placeholder
*****************************/
.ds_dfrpg_bje .edit {
  font-family: 'times new roman';
  font-size: 1em;
  color: rgb(210,147,12); 
  cursor: text;
  letter-spacing:-1px;
}

/****************************
* Section Header Font
*****************************/
.ds_dfrpg_bje .section_head {
  text-align: center;
  font-family: "Trebuchet MS";
  background-color: white;
  margin: 0px 0px 5px 0px;
  color: #8B1300;  
  font-size: 1.2em;
  font-weight: bold;
  font-variant: small-caps;
}

/****************************
* Row Title Font
*****************************/
.ds_dfrpg_bje .row_title {
  font-family: "Trebuchet MS";
  font-size: .8em;
  margin: 5px 0px 1px 0px;
}

/****************************
* Row Body Font
*****************************/
.ds_dfrpg_bje .row_body {
  font-family: "Trebuchet MS";
  font-size: .8em;
  margin-bottom: 1pt;
}

/****************************
* Hanging Indent
*****************************/
.ds_dfrpg_bje .hanging_indent {
    padding-left: 10px ;
    text-indent: -10px ;
}

/****************************
* Centered
*****************************/
.ds_dfrpg_bje .center {
  text-align: center;
}

/****************************
* Left-Aligned
*****************************/
.ds_dfrpg_bje .left {
  text-align: left;
}

/****************************
* Right-Aligned
*****************************/
.ds_dfrpg_bje .right {
  text-align: right;
}

/****************************
* Bolded
*****************************/
.ds_dfrpg_bje .bold {
  font-weight: bold;
}

/****************************
* Italic
*****************************/
.ds_dfrpg_bje .italic {
  font-style:italic;
}

/****************************
* Big
*****************************/
.ds_dfrpg_bje .big {
  font-size: 1em;
}

/****************************
* Small
*****************************/
.ds_dfrpg_bje .small {
  font-size: .6em;
}

/****************************
* Small Caps
*****************************/
.ds_dfrpg_bje .small_caps {
  font-variant: small-caps;
}

/****************************
* Underline (bottom border)
*****************************/
.ds_dfrpg_bje .underline {
  border-bottom: 1px solid #000;
}

/****************************
* Indent
*****************************/
.ds_dfrpg_bje .indent {
  margin-left: 10px
}

/****************************
* Line Spacing - Below
*****************************/
.ds_dfrpg_bje .space_below {
  margin-bottom: 5px
}

/****************************
* Line Spacing - Above
*****************************/
.ds_dfrpg_bje .space_above {
  margin-top: 10px
}

/****************************
* Colored Text
*****************************/
.ds_dfrpg_bje .color {
  color: #8B1300;
}

Javascript

// Global Storage
dfrpg_bje_context = {};

///////////////////////////////////////////////////
// Event Hooks /////////////////////////////////////
///////////////////////////////////////////////////

// Called immediately before the script fills the Span fields with data
function dfrpg_bje_dataPreLoad(opts){
	
	// Set the jeditable button
	aisleten.characters.jeditableSubmit = '<button class="jeditable_submit"><div class="jeditable_submit_text">&#10003;</div></button>';
	
	// Set the test for fields before they're edited
	aisleten.characters.jeditablePlaceholder = '<div class="edit">[Edit]</div>'
	
}

// Called immediately after the script fills the Span fields with data, before jeditable attachement
function dfrpg_bje_dataPostLoad(opts){

	// Store global context for search by class name
	dfrpg_bje_context = document.getElementById(opts['containerId']);

	// Set additional options
	opts['imagePath'] = 'http://ffredemption.com/images/pips/';
	opts['context'] = document.getElementById(opts['containerId']);
	opts['debugThreshold'] = -1;
	
	//Convert interface elements
	dfrpg_bje_convertLists(opts);
	dfrpg_bje_convertPips(opts);
	dfrpg_bje_convertChecks(opts);
	//dfrpg_bje_convertAreas(opts);

}

// Called immediately before the sheet's data is saved
function dfrpg_bje_dataPreSave(opts) {

	// Set additional options
	opts['context'] = document.getElementById(opts['containerId']);

	dfrpg_bje_unconvertPips(opts);
	dfrpg_bje_unconvertChecks(opts);	
	dfrpg_bje_unconvertAreas(opts);
	
}

///////////////////////////////////////////////////
// Pips Interface Control /////////////////////////////
///////////////////////////////////////////////////

// Applies a bunch of pips functionality to the specified element
function dfrpg_bje_pips(oElement,opts){

	// Store options
	oElement.setAttribute('optsImagePath',opts['imagePath']);
	oElement.setAttribute('optsIsEditable',opts['isEditable']);
	oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']);

	// Gets the range of the element from its class name
	oElement.range = function(){
	
		// Get the range from the element's class name
		var iRange = this.className.match(/pipsRange_[\d]+/)[0].substring(10);

		// Default if needed, and return
		if (iRange != 6 && iRange != 7 && iRange != 8){
			this.error(1,"Invalid range specification in Pips Element (Element Class: " + this.className + ")");
			return 10;
		}
		else return iRange;
		
	};
	
	// Gets the field value from the embedded image or the text
	oElement.value = function(){
	
		// Get the value from the image if there is one
		if (this.getElementsByTagName('img').length){
			var sPath = this.getElementsByTagName('img')[0].src;
			var iValue = parseInt(sPath.substring(sPath.length - 9,sPath.length - 7),10);
		}
		
		// If there's no image, get the value from the text
		else{
			var iValue = parseInt(this.innerHTML);
			if (this.innerHTML == '') iValue = 0;
		}
		
		// Check the value for bad data, default if needed, and return
		if (isNaN(iValue) || iValue > this.range() || iValue < 0){
			this.error(1,"Invalid value for Pips Element (Element Class: " + this.className + ")");
			return 0;
		}
		else return iValue;
		
	};
	
	// Converts the associated span element's contents to a pips image
	oElement.showPips = function(){
		
		// Get the image path from options or default
		if (this.getAttribute('optsImagePath')) var sPath = this.getAttribute('optsImagePath');
		else{
			this.error(2,'No imagePath specified in options for pips element (Element Class: ' + this.className + ')');
			sPath = 'dynamic_sheets/minimal4e/0.1/images/';
		}
		
		// Skip fields with a value of -1
		if (this.value() == -1) return;

		// Replace the contents with the appropriate pips image
		this.innerHTML = '<img src="' + sPath + 'pips-' + this.padDigits(this.value(),2) + '-' + this.padDigits(this.range(),2) + '.png" />';
		
		// Activate the pips
		this.activate();		
	
	};
	
	// Converts the associated span element's contents to a text value
	oElement.showValue = function(){
	
		// Replace the contents with the appropriate value string
		this.innerHTML = this.value();
	
	};
	
	// Assigns clickability to a pips image element
	oElement.activate = function(){
	
		// Don't actualy activate anything if we're not in edit mode
		if (this.getAttribute('optsIsEditable') != 'true') return;

		// Activate the element's pips interface
		this.onclick = this.click;
		
		// Set the element's alt text
		this.title = 'Click to set value';
		
		// Set the cursor for the item
		this.style.cursor = 'pointer';

	};
	
	// Click event handler for the pips interface
	oElement.click = function(e){
	
		// Provide cross-browser support for the event information
		var oEvent;
		if (window.event) oEvent = window.event;
		else oEvent = e;
		
		// Set the pixel thresholds for each pip
		var aThresholds = [0,15,30,45,60,75,90,105,120];
		
		// Get the pips image that was clicked as a pips object
		var oImage = this.getElementsByTagName('img')[0];

		// Walk up the offset parent tree to get the true click coords
		var oTemp = oImage;
		var iX = oTemp.offsetLeft;
		if (oTemp.offsetParent){
			while (oTemp = oTemp.offsetParent){
				iX += oTemp.offsetLeft;
			} 
		}
		
		// Determine which pip the click was on and change the image
		var iClickX = oEvent.clientX - iX;		
		for (var iScore = this.range(); iScore >= 0; iScore--){
			if (iClickX > aThresholds[iScore]){

				// If the user clicks the current score, they probably want to reduce by one
				if ((iScore + 1) == this.value()){
					oImage.src = oImage.src.substring(0,oImage.src.length - 9) + this.padDigits(iScore,2) + "-" + this.padDigits(this.range(),2) + ".png";							
				}
				else{
					oImage.src = oImage.src.substring(0,oImage.src.length - 9) + this.padDigits(iScore + 1,2) + "-" + this.padDigits(this.range(),2) + ".png";
				}

				// Once the image has been set, we're done
				return;
				// Call the onUpdate event
				this.onUpdate();				
			}
		}		
	};

	// Error handling function - alerts on errors if bug reporting is on
	oElement.error = function(iImportance,sText){
		if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold');
		else iThreshold = 0;
		if (iImportance < iThreshold){
			alert(sText);
		}
	}

	// Converts a number to a string with prepended zeros to the specified character length
	oElement.padDigits = function(iNumber,iDigits){
		var sNumber = iNumber.toString();
		var sTemp = '';
		if (iDigits > sNumber.length){
				for (var i = 0; i < (iDigits - sNumber.length); i++){
						sTemp += '0';
				}
		}
		return sTemp + sNumber;
	} 

	// On Update event function, typicaly overriden
	oElement.onUpdate = function(){
	
	}	
	
	// Return the pips element for ease of refference
	return oElement;
	
}

// Converts all properly classed spans in the context to pips elements
function dfrpg_bje_convertPips(opts){

	// Get all the spans in the context, whatever it may be
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Convert all the potential values in the context to pips
	var pTemp = {};
	for (var i = 0; i < aSpans.length; i++){
		if (aSpans[i].className.match(/pips/)){
			pTemp = dfrpg_bje_pips(aSpans[i],opts);
			pTemp.showPips();
		}
	}
	
}

// Converts all the pips in the context back to thier basic values for saving
function dfrpg_bje_unconvertPips(opts) {

	// Get the working context
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Flip all the pips in the context back to values
	for(var i = 0; i < aSpans.length; i++){
		if(aSpans[i].className.match(/pips/)){
			aSpans[i].showValue();
		}
	}	
	
}

///////////////////////////////////////////////////
// List Interface Control /////////////////////////////
///////////////////////////////////////////////////

// Applies a bunch of list functionality to the specified element
function dfrpg_bje_list(oElement,opts){

	// Store options
	oElement.setAttribute('optsContainerId',opts['containerId']);
	oElement.setAttribute('optsIsEditable',opts['isEditable']);
	oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']);
	
	// Parses the number of columns the list has from its class name
	oElement.columns = function(){
		
		// Get the column count from the element's class name
		var iColumns = this.className.match(/listColumns_[\d]+/)[0].substring(12);

		// Default if needed, and return
		if (isNaN(iColumns) || iColumns < 1){
			this.error(1,"Invalid column count specification in List Element (Element Class: " + this.className + ")");
			return 1;
		}
		else return iColumns;	
	
	};
	
	// Gets the list's list item template from the element based on class
	oElement.template = function(){
	
		// The template is the first div in the list with the "template" class
		var aDivs = this.getElementsByTagName('div');
		for (var i = 0; i < aDivs.length; i++){
			if (aDivs[i].className.match(/template/)) return aDivs[i];
		}

		// Create a semi-persistant default row template if needed
		if (!this.defaultTemplate){
			this.defaultTemplate = document.createElement('div');
			this.defaultTemplate.innerHTML = '<span class="dsf"></span>';
		}

		// If we got here, there wasn't a template in the list, default and return
		this.error(1,"No template row found in List Element (Element Class: " + this.className + ")");
		return this.defaultTemplate;
	
	};

	// Gets an array of the fields in the template row
	oElement.fields = function(){
	
		// This is easy assuming all the fields are span tags, and all the spans are fields
		return this.template().getElementsByTagName('span');
		
	}
	
	// Gets an array of the rows in the list, excluding the template
	oElement.rows = function()
	{

		// Initialize the list of rows
		var result = new Array();
	
		// Getting the divs in the list the hard way to avoid nested divs making the cut
		var aElements = this.childNodes;
		var aDivs = new Array();
		var iCounter = 0;
		var elementsLength = aElements.length;
		
		for (var elementIndex = 0; elementIndex < elementsLength; elementIndex++)
		{
			if (aElements[elementIndex].tagName == 'DIV')
			{
				aDivs[iCounter] = aElements[elementIndex];
				iCounter++;
			}
		}

		// If we have multiple columns, then get the rows from inside each one
		if (this.columns() > 1)
		{
			var aTemp = new Array();
			var divTagsLength = aDivs.length;
			for (var divIndex = 0; divIndex < divTagsLength; divIndex++)
			{
				if (!aDivs[divIndex].className.match(/template/))
				{
					aTemp = aDivs[divIndex].getElementsByTagName('div');
					var tempLength = aTemp.length;
					for (var tempIndex = 0; tempIndex < tempLength; tempIndex++)
					{
						result[result.length] = aTemp[tempIndex];
					}
				}
			}
		}
		else // Otherwise just get them all from the main div
		{
			var divTagsLength = aDivs.length;
			for (var divIndex = 1; divIndex < divTagsLength; divIndex++)
			{
				result[result.length] = aDivs[divIndex];
			}		
		}

		// Return the array of rows
		// This may have been dissacoiated by the splices, not sure  yet
		return result;
	}
	
	// Generates a structure containing the list's data from the save object
	oElement.loadData = function(){
		
		// Pattern match on the first field for simplicity's sake
		var iCounter = 0;
		var oData = {};

		// Get the fields in order (doesn't allow missing fileds)
		var sClassPattern = this.fields()[0].className.match(/dsf_[\w\d]+/)[0].substring(4);
		while (dynamic_sheet_attrs[sClassPattern + this.padDigits(iCounter,2)] != undefined){
			oData[iCounter] = new Array();
			for (var i = 0; i < this.fields().length; i++){
				oData[iCounter][i] = dynamic_sheet_attrs[this.fields()[i].className.match(/dsf_[\w\d]+/)[0].substring(4) + this.padDigits(iCounter,2)];
			}
			iCounter++;
		}
		
		// Write the length
		oData.length = iCounter;
		
		// Write the completed data structure to the object
		this.data = oData;

	}
		
	// Generates a structure contianing the list's data form the list itself
	oElement.parseData = function()
	{
	
		// Go through each row of each field and populate the structure
		var oData = {};
		
		var rowCollection = this.rows();
		var rowsLength = rowCollection.length;
		
		oData.length = rowsLength;
		for (var rowIndex = 0; rowIndex < rowsLength; rowIndex++)
		{
			oData[rowIndex] = new Array();
			var fieldsLength = this.fields().length;
			for (var fieldIndex = 0; fieldIndex < fieldsLength; fieldIndex++)
			{
				var row = rowCollection[rowIndex];
				var elementsInRow = row.getElementsByTagName('span');
				
				if(elementsInRow.length > fieldIndex)
				{
					oData[rowIndex][fieldIndex] = elementsInRow[fieldIndex].innerHTML;	
				}					
			}
			
			//oData.length = rowIndex + 1;
		}
		
		// Write the completed data structure to the object
		this.data = oData;
	}
	
	// Renders out the code for the list and puts it into the list element
	oElement.render = function(){
	
		var sTemp = '';
		var iCurrentColumn = 1;
		var iBreak = 0;
		var sClass = '';

		// Add the first column opener if multiple columns, and calc first col break
		if (this.columns() > 1)
		{
			sTemp = '\n<div class="column column_spacing">';
			iBreak += Math.floor(this.data.length / this.columns()) - 1;
			if (iCurrentColumn <= (this.data.length % this.columns())) 
				iBreak++;
		}

		var dataLength = this.data.length;
		// Accumulate the list code for each row
		for (var dataIndex = 0; dataIndex < dataLength; dataIndex++)
		{

			// Populate and class the fields
			var fieldsLength = this.fields().length;
			for (var fieldIndex = 0; fieldIndex < fieldsLength; fieldIndex++)
			{
				this.fields()[fieldIndex].className = this.fields()[fieldIndex].className.replace(/dsf_[\w\d]+/,this.fields()[fieldIndex].className.match(/dsf_[\w\d]+/)[0] + this.padDigits(dataIndex,2));
				this.fields()[fieldIndex].innerHTML = this.data[dataIndex][fieldIndex];
			}
			
			// Add the list item to the code
			sTemp += this.template().innerHTML;
			
			// Reset the template if it was used				
			for (var fieldIndex2 = 0; fieldIndex2 < fieldsLength; fieldIndex2++)
			{
				sClass = this.fields()[fieldIndex2].className.match(/dsf_[\w\d]+/)[0];
				this.fields()[fieldIndex2].className = this.fields()[fieldIndex2].className.replace(/dsf_[\w\d]+/,sClass.substring(0,sClass.length - 2));
				this.fields()[fieldIndex2].innerHTML = '';
			}
			
			// Add column breaks where needed
			if (this.columns() > 1 && (dataIndex == iBreak))
			{
				// Add the column opener for the last column
				if (iCurrentColumn == (this.columns() - 1)) 
					sTemp += '</div>\n<div class="column">';
				else if (dataIndex == (this.data.length - 1)) // Add the final column's column closer
					sTemp += '</div>';
				else sTemp += '</div>\n<div class="column column_spacing">';// Add the column openers for other columns
								
				// Update the column break and current column
				iCurrentColumn++;
				iBreak += Math.floor(this.data.length / this.columns());
				if (iCurrentColumn <= (this.data.length % this.columns())) 
					iBreak++;
			}
		}		
		
		// Prepend the template to the list code
		sTemp = '<div class="template">' + this.template().innerHTML + '</div>' + sTemp;
			
		// Purge jquery expandos in explorer
		sTemp = sTemp.replace(/jQuery[\d]+="[\d]+"/g,'');
			
		// Put the code in the list
		this.innerHTML = sTemp;
		
		// Activate the interface if in edit mode
		if (this.getAttribute('optsIsEditable') == 'true')
		{
			// Look through all the anchor elements in the list and activate by class name
			var aButtons = this.getElementsByTagName('a');
			var buttonsLength = aButtons.length;
			for (var buttonIndex = 0; buttonIndex < buttonsLength;buttonIndex++)
			{
				if(aButtons[buttonIndex].className.match(/listDelete/)) aButtons[buttonIndex].onclick = this.deleteItem;
				else if(aButtons[buttonIndex].className.match(/listPromote/)) aButtons[buttonIndex].onclick = this.promoteItem;
				else if(aButtons[buttonIndex].className.match(/listDemote/)) aButtons[buttonIndex].onclick = this.demoteItem;
			}					
		}
		else // Hide them if not
		{
			// Look through all the anchor elements in the list and hide by class name
			var oContext = document.getElementById(this.getAttribute('optsContainerId'));
			if (oContext) 
				var aButtons = oContext.getElementsByTagName('a');
			else
			{
				this.error(2,'No context specified in options for list element (Element Class: ' + this.className + ')');
				var aButtons = document.getElementsByTagName('a');
			}
			
			var buttonsLength = aButtons.length;
			for (var buttonIndex = 0; buttonIndex < buttonsLength; buttonIndex++)
			{
				if(aButtons[buttonIndex].className.match(/interface/)) aButtons[buttonIndex].style.display = 'none';
			}
		}
		
		// Triger the list's onUpdate event
		this.onUpdate();
	};
	
	// Adds an blank element to the list
	oElement.addItem = function()
	{
		// Get the latest data from the list
		this.parseData();

		// Add a new row to the data, full of blank values
		var aRow = new Array();
		var fieldsLength = this.fields().length;
		
		for (var fieldIndex = 0; fieldIndex < fieldsLength; fieldIndex++)
		{
			aRow[fieldIndex] = '';
		}
		
		this.data[this.data.length] = aRow;
		this.data.length++;
		
		// Re-render the list
		this.render();
	};

	// Deletes the specified element from the list
	oElement.deleteItem = function(){
	
		// Activate the list the item belongs to
		var oItem = this.parentNode;
		if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode;
		else var lList = oItem.parentNode.parentNode;

		// Stop here if we're editing things
		if (oItem.innerHTML.match(/input/)) return;
		
		// Delete the item from the DOM
		oItem.parentNode.removeChild(oItem);
		
		// Refresh the list to renew numbering
		lList.parseData();
		lList.render();
	
	};
	
	// Moves the specified element up the list one place
	oElement.promoteItem = function(){
	
		// Activate the list the item belongs to
		var oItem = this.parentNode;
		if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode;
		else var lList = oItem.parentNode.parentNode;
		
		// Stop here if we're editing things
		if (oItem.innerHTML.match(/input/)) return;
		
		// Get the latest data from the list
		lList.parseData();
		
		// Figure out what row number was clicked
		var sFieldClass = oItem.getElementsByTagName('span')[0].className.match(/dsf_[\w\d]+/)[0];
		var sIndexString = sFieldClass.substring(sFieldClass.length - 2).replace(/^[0]+/,'');
		var iIndex = parseInt(sIndexString);
		
		// Stop right here if the clicked item is already at the top
		if (iIndex == 0) return;
		
		// Swap the row data with the one above it
		var aRowA = lList.data[iIndex];
		var aRowB = lList.data[iIndex - 1];			
		lList.data[iIndex] = aRowB;
		lList.data[iIndex - 1] = aRowA;
		
		// Re-render the data
		lList.render();
	
	};
	
	// Moves the specified element down the list one place
	oElement.demoteItem = function(){
	
		// Activate the list the item belongs to
		var oItem = this.parentNode;
		if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode;
		else var lList = oItem.parentNode.parentNode;
		
		// Stop here if we're editing things
		if (oItem.innerHTML.match(/input/)) return;
		
		// Get the latest data from the list
		lList.parseData();
		
		// Figure out what row number was clicked
		var sFieldClass = oItem.getElementsByTagName('span')[0].className.match(/dsf_[\w\d]+/)[0];
		var sIndexString = sFieldClass.substring(sFieldClass.length - 2).replace(/^[0]+/,'');
		var iIndex = parseInt(sIndexString);
		
		// Stop right here if the clicked item is alreayd on the bottom
		if (iIndex == (lList.data.length - 1)) return;
		
		// Swap the row data with the one below it
		var aRowA = lList.data[iIndex];
		var aRowB = lList.data[iIndex + 1];			
		lList.data[iIndex] = aRowB;
		lList.data[iIndex + 1] = aRowA;
		
		// Re-render the data
		lList.render();
		
	};

	// Error handling function - alerts on errors if bug reporting is on
	oElement.error = function(iImportance,sText){
		if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold');
		else iThreshold = 0;
		if (iImportance < iThreshold){
			alert(sText);
		}
	}

	// Converts a number to a string with prepended zeros to the specified character length
	oElement.padDigits = function(iNumber,iDigits){
		var sNumber = iNumber.toString();
		var sTemp = '';
		if (iDigits > sNumber.length){
				for (var i = 0; i < (iDigits - sNumber.length); i++){
						sTemp += '0';
				}
		}
		return sTemp + sNumber;
	} 
	
	// On Update event function, typicaly overriden
	oElement.onUpdate = function(){
	
	}
	
	// Return the origenal element now that it's fully equipped
	return oElement;
	
}

// Converts all properly classed divs in the context to lists
function dfrpg_bje_convertLists(opts){

	// Find all the divs on the page with "list" in their class name
	if (opts['context']) var aDivs = opts['context'].getElementsByTagName('div');
	else var aDivs = document.getElementsByTagName('div');
	
	var lTemp = {};
	for (var i = 0; i < aDivs.length; i++){
		if (aDivs[i].className.match(/list/)){
		
			// Convert each element to a full featured list object
			lTemp = dfrpg_bje_list(aDivs[i],opts);		
			
			// Populate the list from the data variable
			lTemp.loadData();
			lTemp.render();
			
			// Assign the onUpdate function
			lTemp.onUpdate = function(){
			
				dfrpg_bje_convertPips(opts);
				aisleten.characters.bindAllFields(opts['slug'],opts['containerId']);
				//dst_devkit.bindDynamicAttributes();
			
			}
		}
	}	
	
}

///////////////////////////////////////////////////
// Check Interface Control ///////////////////////////
///////////////////////////////////////////////////

// Applies a bunch of pips functionality to the specified element
function dfrpg_bje_check(oElement,opts){

	// Store options
	oElement.setAttribute('optsImagePath',opts['imagePath']);
	oElement.setAttribute('optsIsEditable',opts['isEditable']);
	oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']);
	
	// Gets the field value from the embedded image or the text
	oElement.value = function(){
	
		// Get the value from the image if there is one
		if (this.getElementsByTagName('img').length){
			var sPath = this.getElementsByTagName('img')[0].src;
			var sValue = sPath.substring(sPath.length - 5,sPath.length - 4);
		}
		
		// If there's no image, get the value from the text
		else{
			var sValue = this.innerHTML;
			if (this.innerHTML == '') sValue = '0';
		}
		
		// Check the value for bad data, default if needed, and return
		if (sValue != '1' && sValue != '0'){
			this.error(1,"Invalid value for Check Element (Element Class: " + this.className + ")");
			return 0;
		}
		else return sValue;
		
	};
	
	// Converts the associated span element's contents to a pips image
	oElement.showCheck = function(){
		
		// Get the image path from options or default
		if (this.getAttribute('optsImagePath')) var sPath = this.getAttribute('optsImagePath');
		else{
			this.error(2,'No imagePath specified in options for Checks element (Element Class: ' + this.className + ')');
			sPath = 'dynamic_sheets/minimal4e/0.1/images/';
		}
		
		// Replace the contents with the appropriate check image
		this.innerHTML = '<img src="' + sPath + 'check-' + this.value() + '.png" />';
		
		// Activate the check
		this.activate();		
	
	};
	
	// Converts the associated span element's contents to a text value
	oElement.showValue = function(){
	
		// Replace the contents with the appropriate value string
		this.innerHTML = this.value();
	
	};
	
	// Assigns clickability to a pips image element
	oElement.activate = function(){
	
		// Don't actualy activate anything if we're not in edit mode
		if (this.getAttribute('optsIsEditable') != 'true') return;

		// Activate the element's pips interface
		this.onclick = this.click;
		
		// Set the element's alt text
		this.title = 'Click to set value';
		
		// Set the cursor for the item
		this.style.cursor = 'pointer';

	};
	
	// Click event handler for the pips interface
	oElement.click = function(){
	
		// Get the pips image that was clicked as a pips object
		var oImage = this.getElementsByTagName('img')[0];
		
		// Determine which pip the click was on and change the image
		if (this.value() == "1") {oImage.src = oImage.src.substring(0,oImage.src.length - 5) + "0.png"; }							
		else { oImage.src = oImage.src.substring(0,oImage.src.length - 5) + "1.png"; }
		
		// Call the onUpdate event
		this.onUpdate();
		
	};

	// Error handling function - alerts on errors if bug reporting is on
	oElement.error = function(iImportance,sText){
		if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold');
		else iThreshold = 0;
		if (iImportance < iThreshold){
			alert(sText);
		}
	}

	// On Update event function, typicaly overriden
	oElement.onUpdate = function(){
	
	}	
	
	// Return the pips element for ease of refference
	return oElement;
	
}

// Converts all properly classed spans in the context to pips elements
function dfrpg_bje_convertChecks(opts){

	// Get all the spans in the context, whatever it may be
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Convert all the potential values in the context to pips
	var pTemp = {};
	for (var i = 0; i < aSpans.length; i++){
		if (aSpans[i].className.match(/check/)){
			pTemp = dfrpg_bje_check(aSpans[i],opts);
			pTemp.showCheck();
		}
	}
	
}

// Converts all the pips in the context back to thier basic values for saving
function dfrpg_bje_unconvertChecks(opts) {

	// Get the working context
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Flip all the pips in the context back to values
	for(var i = 0; i < aSpans.length; i++){
		if(aSpans[i].className.match(/check/)){
			aSpans[i].showValue();
		}
	}	
	
}

///////////////////////////////////////////////////
// General Utility Functions //////////////////////////
///////////////////////////////////////////////////

// Gets an array of elements with a particular class from the context
//function dfrpg_bje_getElementsByClassName(sClassName,sElementType)
//{
	// Provide default element type
//	if (!sElementType) 
//		sElementType = 'div';

//	var aList = new Array();
//	var aDivs = dfrpg_bje_context.getElementsByTagName(sElementType);
	
//	for (var elementIndex = 0; elementIndex < aDivs.length; elementIndex++)
//	{
//		if (aDivs[elementIndex].className.match(sClassName)) 
//		{
//			aList[aList.length] = aDivs[elementIndex];
//		}
//	}
	
//	return aList;
//}

function dfrpg_bje_getElementsByClassName(sClassName,sElementType)
{
	// Provide default element type
	if (!sElementType) 
	if (!sElementType) 
		sElementType = 'div';

	var result = new Array();
	var divTags = dfrpg_bje_context.getElementsByTagName(sElementType);
	var divTagsLength = divTags.length;
	
	for (var elementIndex = 0; elementIndex < divTagsLength; elementIndex++)
	{
		if (divTags[elementIndex].className.match(sClassName)) 
		{
			result[result.length] = divTags[elementIndex];
		}
	}
	
	return result;
}

// Tab switching function
function dfrpg_bje_tabClick(oTab,sPageClass){
	
	// Abort if already on the selected tab
	var oPage = dfrpg_bje_getElementsByClassName('page_' + sPageClass)[0];
	if (oPage.style.display != 'none') return;
	
	// Set the length of the shorter page to match the longer page
	var oPages = dfrpg_bje_getElementsByClassName('main');
	var iHeight = 0;
	for (var i = 0; i < oPages.length; i++){
		if (oPages[i].offsetHeight > iHeight) iHeight = oPages[i].offsetHeight;
	}
	for (var n = 0; n < oPages.length; n++){
		oPages[n].style.minHeight = (iHeight - 140) + 'px';
	}
	
	// Corelate the 'type' fields on the two pages
	var aTypes = dfrpg_bje_getElementsByClassName('dsf_type','span');
	if (sPageClass == 'sheet'){
		aTypes[0].innerHTML = aTypes[1].innerHTML;
	}
	else{
		aTypes[1].innerHTML = aTypes[0].innerHTML;	
	}
	
	// Show the proper pages and tabs
	if (sPageClass == 'sheet'){
		oTab.parentNode.style.backgroundImage = "url(http://omnichron.net/external/op/dst_exalted/dynamic_sheets/exalted/0.1/images/brass-tab-left.png)";
		dfrpg_bje_getElementsByClassName('page_sheet')[0].style.display = 'block';
		dfrpg_bje_getElementsByClassName('page_bio')[0].style.display = 'none';
	}
	else{
		oTab.parentNode.style.backgroundImage = "url(http://omnichron.net/external/op/dst_exalted/dynamic_sheets/exalted/0.1/images/brass-tab-right.png)";
		dfrpg_bje_getElementsByClassName('page_bio')[0].style.display = 'block';
		dfrpg_bje_getElementsByClassName('page_sheet')[0].style.display = 'none';	
	}
	
}

// Converts all properly classed divs in the context to lists
function dfrpg_bje_convertAreas(opts){

	// Find all the spans on the page with "area" in their class name
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	var taTemp = {};
	for (var i = 0; i < aSpans.length; i++){
		if (aSpans[i].className.match(/area/)){
		
			// Convert each element to a full featured list object
			taTemp = dfrpg_bje_area(aSpans[i],opts);
			taTemp.activate();
			
			// Load up custom parameters and such depending on class
			if (aSpans[i].className.match('is_tooltip')){
				taTemp.setAttribute('widthMod',-9);
				taTemp.setAttribute('heightMod',-9);
				taTemp.setAttribute('areaClasses','area tip_area');
				taTemp.onUpdate = function(){
					oParent = this.parentNode;
					oParent.setAttribute("editLock","unlocked");
					oParent.mouseOut();
				};
			}
			else{
				taTemp.setAttribute('widthMod',-23);
				taTemp.setAttribute('heightMod',-6);
				taTemp.setAttribute('areaClasses','area');			
			}

		}
	}	
	
}

// Sets the necesary class name on areas for themt o be saved
function dfrpg_bje_unconvertAreas(opts){

	// Find all the spans on the page with "area" in their class name
	if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
	else var aSpans = document.getElementsByTagName('span');
	
	// Add the necesary save key to the class name
	// Also close out any active edit boxes
	for (var i = 0; i < aSpans.length; i++){
		if (aSpans[i].className.match(/area/)){
			if (aSpans[i].innerHTML.match(/textarea/)) aSpans[i].submit();
			if (aSpans[i].innerHTML == 'Click to edit') aSpans[i].innerHTML = '';
		}
	}	
}

Back

The Dresden Files RPG

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account