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

Dresden Files

Author: jbteller4

Slug: dfrpg_jbteller4

System: The Dresden Files

DST Source Code

HTML Template

<div class="wrapper">  

  <div class="background_image"><img src="http://imagebarn.us/images/jbteller4/background_top.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_title bold small_caps underline">
		  <span class="skill">Skill:</span>
		  <span class="skill_rank">Adjective (+Rank)</span>
		</div>
		<div class="row_body">
		  <span class="skill">Alertness:</span>
		  <span class="skill_rank dsf dsf_alertness"></span><br/>
		  <span class="skill">Athletics:</span>
		  <span class="skill_rank dsf dsf_athletics"></span><br/>
		  <span class="skill">Burglary:</span>
		  <span class="skill_rank dsf dsf_burglary"></span><br/>
		  <span class="skill">Contacts:</span>
		  <span class="skill_rank dsf dsf_contacts"></span><br/>
		  <span class="skill">Conviction:</span>
		  <span class="skill_rank dsf dsf_conviction"></span><br/>
		  <span class="skill">Craftsmanship:</span>
		  <span class="skill_rank dsf dsf_craftsmanship"></span><br/>
		  <span class="skill">Deceit:</span>
		  <span class="skill_rank dsf dsf_deceit"></span><br/>
		  <span class="skill">Discipline:</span>
		  <span class="skill_rank dsf dsf_discipline"></span><br/>
		  <span class="skill">Driving:</span>
		  <span class="skill_rank dsf dsf_driving"></span><br/>
		  <span class="skill">Empathy:</span>
		  <span class="skill_rank dsf dsf_empathy"></span><br/>
		  <span class="skill">Endurance:</span>
		  <span class="skill_rank dsf dsf_endurance"></span><br/>
		  <span class="skill">Fists:</span>
		  <span class="skill_rank dsf dsf_fists"></span><br/>
		  <span class="skill">Guns:</span>
		  <span class="skill_rank dsf dsf_guns"></span><br/>
		  <span class="skill">Intimidation:</span>
		  <span class="skill_rank dsf dsf_intimidation"></span><br/>
		  <span class="skill">Investigation:</span>
		  <span class="skill_rank dsf dsf_investigation"></span><br/>
		  <span class="skill">Lore:</span>
		  <span class="skill_rank dsf dsf_lore"></span><br/>
		  <span class="skill">Might:</span>
		  <span class="skill_rank dsf dsf_might"></span><br/>
		  <span class="skill">Performance:</span>
		  <span class="skill_rank dsf dsf_performance"></span><br/>
		  <span class="skill">Presence:</span>
		  <span class="skill_rank dsf dsf_presence"></span><br/>
		  <span class="skill">Rapport:</span>
		  <span class="skill_rank dsf dsf_rapport"></span><br/>
		  <span class="skill">Resources:</span>
		  <span class="skill_rank dsf dsf_resources"></span><br/>
		  <span class="skill">Scholarship:</span>
		  <span class="skill_rank dsf dsf_scholarship"></span><br/>
		  <span class="skill">Stealth:</span>
		  <span class="skill_rank dsf dsf_stealth"></span><br/>
		  <span class="skill">Survival:</span>
		  <span class="skill_rank dsf dsf_survival"></span><br/>
		  <span class="skill">Weapons:</span>
		  <span class="skill_rank dsf dsf_weapons"></span><br/>
		</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</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_physical"></span>
		</div>
		<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">Mental</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_mental"></span>
		</div>
		<div class="row_title">
		  <span class="stress_type bold">Social</span>
		  <span class="readonly pipsRange_8 dsf dsf_stress_social"></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_jbteller4_getElementsByClassName('list_notes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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://imagebarn.us/images/jbteller4/title.gif" 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_jbteller4_getElementsByClassName('list_aspects')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
				<a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
				<a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_stunts')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_specializations')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_focus_items')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_rotes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_enchanted_items')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_potions')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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_jbteller4_getElementsByClassName('list_spellcasting_notes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" 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://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="&#8595;"/></a>
			  <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="&#8593;"/></a>
			  <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" 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://imagebarn.us/images/jbteller4/background_bottom.gif" 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_jbteller4 .wrapper{
  position:relative;
}

/****************************
* Main (Page Frame)
*****************************/
.ds_dfrpg_jbteller4 .main {
  width: 730px;
  display:block;
  margin-top: 0px;
  margin-bottom: 0px;
  float: left;
  background-image:url('http://imagebarn.us/images/jbteller4/background_middle.gif');
}

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

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

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

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

/****************************
* Portrait Holder
*****************************/
.ds_dfrpg_jbteller4 .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_jbteller4 .page_head {
  margin-top: 25px;
  margin-bottom: 20px;
  text-align: center;
}

/****************************
* Section Box - Left Column
*****************************/
.ds_dfrpg_jbteller4 .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_jbteller4 .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_jbteller4 .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_jbteller4 .skill {
  display:inline-block;
  vertical-align:top;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

/****************************
* Pips - 6 (Toughness Stress)
*****************************/
.ds_dfrpg_jbteller4 .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_jbteller4 .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_jbteller4 .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_jbteller4 .listAdd{
	float:right;
	cursor:pointer;
	text-decoration:none;
	font-size: 1em;
	color:#776655;
}

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

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

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

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

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

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

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



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

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

/****************************
* Section Header Font
*****************************/
.ds_dfrpg_jbteller4 .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_jbteller4 .row_title {
  font-family: "Trebuchet MS";
  font-size: .8em;
  margin: 5px 0px 1px 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Javascript

// Global Storage
dfrpg_jbteller4_context = {};

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

// Called immediately before the script fills the Span fields with data
function dfrpg_jbteller4_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_jbteller4_dataPostLoad(opts){

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

	// Set additional options
	opts['imagePath'] = 'http://imagebarn.us/images/jbteller4/';
	opts['context'] = document.getElementById(opts['containerId']);
	opts['debugThreshold'] = -1;
	
	//Convert interface elements
	dfrpg_jbteller4_convertLists(opts);
	dfrpg_jbteller4_convertPips(opts);
	dfrpg_jbteller4_convertChecks(opts);
	dfrpg_jbteller4_convertAreas(opts);

}

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

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

	dfrpg_jbteller4_unconvertPips(opts);
	dfrpg_jbteller4_unconvertChecks(opts);	
	dfrpg_jbteller4_unconvertAreas(opts);
	
}

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

// Applies a bunch of pips functionality to the specified element
function dfrpg_jbteller4_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_jbteller4_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_jbteller4_pips(aSpans[i],opts);
			pTemp.showPips();
		}
	}
	
}

// Converts all the pips in the context back to thier basic values for saving
function dfrpg_jbteller4_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_jbteller4_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 aRows = 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;
		for (var n = 0; n < aElements.length; n++){
			if (aElements[n].tagName == 'DIV'){
				aDivs[iCounter] = aElements[n];
				iCounter++;
			}
		}

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

		// Return the array of rows
		// This may have been dissacoiated by the splices, not sure  yet
		return aRows;
	
	}
	
	// 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 = {};
		oData.length = 0;
		for (var i = 0; i < this.rows().length; i++){
			oData[i] = new Array();
			for (var n = 0; n < this.fields().length; n++){
				oData[i][n] = this.rows()[i].getElementsByTagName('span')[n].innerHTML				
			}
			oData.length = i + 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++;
		}

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

			// Populate and class the fields
			for (var n = 0; n < this.fields().length; n++){
				this.fields()[n].className = this.fields()[n].className.replace(/dsf_[\w\d]+/,this.fields()[n].className.match(/dsf_[\w\d]+/)[0] + this.padDigits(i,2));
				this.fields()[n].innerHTML = this.data[i][n];
			}
			
			// Add the list item to the code
			sTemp += this.template().innerHTML;
			
			// Reset the template if it was used					
			for (var x = 0; x < this.fields().length; x++){
				sClass = this.fields()[x].className.match(/dsf_[\w\d]+/)[0];
				this.fields()[x].className = this.fields()[x].className.replace(/dsf_[\w\d]+/,sClass.substring(0,sClass.length - 2));
				this.fields()[x].innerHTML = '';
			}
			
			// Add column breaks where needed
			if (this.columns() > 1 && (i == iBreak)){

				// Add the column opener for the last column
				if (iCurrentColumn == (this.columns() - 1)) sTemp += '</div>\n<div class="column">';
				// Add the final column's column closer
				else if (i == (this.data.length - 1)) sTemp += '</div>';
				// Add the column openers for other columns
				else sTemp += '</div>\n<div class="column column_spacing">';
								
				// 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');
			for (var y = 0; y < aButtons.length;y++){
				if(aButtons[y].className.match(/listDelete/)) aButtons[y].onclick = this.deleteItem;
				else if(aButtons[y].className.match(/listPromote/)) aButtons[y].onclick = this.promoteItem;
				else if(aButtons[y].className.match(/listDemote/)) aButtons[y].onclick = this.demoteItem;
			}					
		}
		// Hide them if not
		else{
		
			// 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');
			}
			
			for (var y = 0; y < aButtons.length; y++){
				if(aButtons[y].className.match(/interface/)) aButtons[y].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();
		for (var i = 0; i < this.fields().length; i++){
			aRow[i] = '';
		}
		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_jbteller4_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_jbteller4_list(aDivs[i],opts);		
			
			// Populate the list from the data variable
			lTemp.loadData();
			lTemp.render();
			
			// Assign the onUpdate function
			lTemp.onUpdate = function(){
			
				dfrpg_jbteller4_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_jbteller4_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_jbteller4_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_jbteller4_check(aSpans[i],opts);
			pTemp.showCheck();
		}
	}
	
}

// Converts all the pips in the context back to thier basic values for saving
function dfrpg_jbteller4_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_jbteller4_getElementsByClassName(sClassName,sElementType){

	// Provide default element type
	if (!sElementType) sElementType = 'div';

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

// Tab switching function
function dfrpg_jbteller4_tabClick(oTab,sPageClass){
	
	// Abort if already on the selected tab
	var oPage = dfrpg_jbteller4_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_jbteller4_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_jbteller4_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_jbteller4_getElementsByClassName('page_sheet')[0].style.display = 'block';
		dfrpg_jbteller4_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_jbteller4_getElementsByClassName('page_bio')[0].style.display = 'block';
		dfrpg_jbteller4_getElementsByClassName('page_sheet')[0].style.display = 'none';	
	}
	
}

Back

Dresden Files

Create Your Campaign

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.

Dresden Files

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account

I'm sorry, but we no longer support this web browser. Please upgrade your browser or install Chrome or Firefox to enjoy the full functionality of this site.