<?xml version="1.0" encoding="UTF-8"?>
<!--
****************************************************************************

     File Name:   extraGadgetStyles.box

****************************************************************************
   C O P Y R I G H T   A N D   C O N F I D E N T I A L I T Y   N O T I C E
****************************************************************************

//      Copyright (c) 2006 AOL LLC.  All rights reserved.
//      This software contains valuable confidential and proprietary
//      information of AOL LLC. and is subject to applicable
//      licensing agreements.  Unauthorized reproduction, transmission or
//      distribution of this file and its contents is a violation of
//      applicable laws.
//
//            A O L   C O N F I D E N T I A L

****************************************************************************
-->


<?boxely version="1.0"?>

<?import href="box://aimToolkit/theme/coreStyles.box"?>

<library xmlns="http://www.aol.com/boxely/resource.xsd">

    <animation id="explodeBox">
        <animate name="hidden" type="attribute" from="before" to="false" dur="0ms"/>
        <animate name="scale"  type="style" from="100" to="300" dur="500ms" fill="remove"/>
        <animate name="hidden" type="attribute" from="before" to="true" begin="500ms" dur="0ms"/>
        <animate name="scale"  type="style" from="before" to="100" begin="501ms" dur="0" fill="remove"/>
    </animation>

    <animation id="explodeIcon">
        <animate name="opacity"     type="style" from="100" to="0" dur="500ms" fill="remove"/>
        <animate name="opacity"     type="style" from="before" to="0" begin="501ms" dur="1ms" fill="remove"/>
    </animation>

    <style tag="aolExplodingImageButton" id="aolExplodingImageButtonStyle" vAlign="center" inherits="#aolcontrol" padding="3">
        <part name="explodingBox" left="center" top="center" position="fixed">
            <attribute name="explode" animate="url(#explodeBox)"/>
        </part>
        <part name="explodingIcon" left="center" top="center" position="fixed">
            <attribute name="explode" animate="url(#explodeIcon)"/>
        </part>

        <state name="disabled" opacity="50%" colorSaturation="50%" animate="url(#controlDisable)" animateExit="url(#controlEnable)"/>
        <state name="enabled"  opacity="100%" colorSaturation="100%" animate="url(#controlEnable)"/>
        <state name="hovered"
            colorAdd="#00002233"
            animate="url(#controlHover)"
            animateExit="url(#controlDehover)"/>
        <state name="pressed">
            <state name="hovered" padding="4 2 2 4"/>
        </state>
        <state name="focused" />
    </style>
    
 
    <style 
        id="accAolExplodingImgBtnStyle" 
        accStyleFor="aolExplodingImageButtonStyle"
        inherits="#aolcontrol"
        vAlign="center" padding="3">
        
        <part name="explodingBox" left="center" top="center" position="fixed">
            <attribute name="explode" animate="url(#explodeBox)"/>
        </part>
        <part name="explodingIcon" left="center" top="center" position="fixed">
            <attribute name="explode" animate="url(#explodeIcon)"/>
        </part>

        <state name="disabled" colorSaturation="50%"/>
        <state name="enabled"  opacity="100%" colorSaturation="100%"/>
        
        <state name="hovered"
            colorAdd="#00002233">
        </state>
            
        <state name="pressed">
            <state name="hovered" padding="4 2 2 4"/>
        </state>
        
        <state name="focused" />
    </style>
</library>