Saving extra data to a sitecore field

We use the Shadowbox component on our web site.

How we use the shadowbox is whenever an image is displayed the user can decide if they want the image to be clickable to open up a video or other media content (podcast).

In our first web site in Sitecore the users had to put the shadowbox parameters inside the html. This was not a good seperation of presentation and content. But our first site had to be up quick, so we went with the easiest albeit harder to maintain approach. Now the users groan whenever they have to enter parameters for a shadowbox link or other html that they must enter into the content.

So the goal for our future sites is to seperate presentation from content as much as possible (and have exceptions when necessary).

After batting around a few ideas on how to implement the shadowbox parameters needed into Sitecore I came to the following conclusions:

1. I did not want to add a new field type, that would require too much work. I'm pretty lazy :). No, actually a new field type felt like overkill. Even after adding a new field type I would need a way to store and edit the shadowbox parameters. A new field type would require updating configuration files and explaining to the team we need to use this new field type instead of the basic Sitecore field type. In essence a new field type felt like a bigger change.
   
2. I did not want a new template that I would add to existing templates. The reason I did not want this is because the shadowbox functionality is tied to an image (at least how we are using it). We already had a "Content Background Image" and "Content Image" templates. I did not want to add a "Shadowbox" template that the users might not fill out, and since the Shadowbox must be tied to an Image it would require one of the "Content Image" or "Content Background Image" templates to exist. Yeah, I know I could add a image field to my Shadowbox template, but we already have a template that contains an image field. Our templates are based on an object oriented structure and I did not like how the object model looked with the Shadowbox template having its own image field.
   
3. A sitecore field is stored as XML. For instance, the Image field is stored as an XML string with the root node being the image tag. The image tag has many attributes corresponding to the various attributes one can set for an image.

So I decided to pursue the option of getting the Shadowbox parameters stored as attributes in the image tag of the XML.
Here is what I did to make this happen....(code will follow)

1. I found that the Image Properties dialog which shows when you click Properties of an image field is created from the file Sitecore\Shell\Applications\Media\Image Properites\Image Properties.xaml.xml. So I added my text box fields to this class. See SDN if you want a further discussion of Sitecores XAML.
   
2. Inside the Image Properties.xaml.xml exists an inherit attribute which tells you what class handles the code behind for the xaml. I created a new class which extends the Sitecore.Shell.Applications.Media.ImageProperties.ImagePropertiespage.
   
3. I modified the inherit attribute to point to my new class.
   
4. In my new class I overode the OnLoad and the OK_Click(). I also added a property which gave me the XmlValue object. All of the code will be presented below.

I hope this helps someone in anyway.