Spark! Ugh!

[CaseyBentz]

I have finally made the move to flex 4. I am attempting to use Spark components where available. I have a list of parks that I want to have placed in a datagroup or whatever is recommended, and have the selected item have a different color. I have tried everything I can think of. I am using a custom ItemRenderer. I have included all the applicable code. Please help. I feel like I am starting over at square one with Spark.

 
<s:DataGroup
id="dGroup" itemRenderer="com.view.AreaItemRenderer">
 
<s:layout>
 
[LEFT]<s:VerticalLayout/>

</s:layout>
<s:ArrayList>
</s:ArrayList>
[/LEFT]

 
 
 
 
</s:DataGroup>

 
<?xml version="1.0" encoding="utf-8"?>
 
<s:ItemRenderer
 
 
 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
 
xmlns:s="library://ns.adobe.com/flex/spark" 
 
[LEFT]xmlns:mx="library://ns.adobe.com/flex/mx" 

autoDrawBackground="false"
[LEFT]useHandCursor="true"
buttonMode="true"
click="clickHandler(event)">
<s:layout>
 <s:VerticalLayout paddingTop="5"
    paddingBottom="0"/>
</s:layout>
<s:states>
 <s:State name="normal"/>
 <s:State name="selected"/>
 <s:State name="hovered"/>
</s:states>
<fx:Script>
<![CDATA[
 import com.events.ShowHighlightEvent;[/LEFT]
[/LEFT]

 
 
 
 
 
 
 protectedfunction clickHandler(event:MouseEvent):void
 
[LEFT] {

   var infoData:Object = data;
[LEFT]   dispatchEvent(new ShowHighlightEvent([infoData], ShowHighlightEvent.SHOW_HIGHLIGHT_EVENT));
 }
]]>
</fx:Script>
<s:Label text="{data.SITE_NAME}" styleName="InfoTitle" color.hovered="#75A140"/>[/LEFT]
[/LEFT]

 
 
 
 
</s:ItemRenderer>

.InfoTitle
{
 fontFamily: Arial, Helvetica, sans-serif;
 fontSize: 12;
 fontWeight: bold;
 color: #75A140;
 text-decoration: underline;
}