<?import href="box://aimToolkit/content/gadgets.box"?>
<!--
****************************************************************************

     File Name:   gadget.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

****************************************************************************
-->

<?import href="box://aimToolkit/theme/toolkit.box"?>
<?import href="box://imApp/content/picshare/style.box"?>



<!DOCTYPE window SYSTEM "box://imApp/resources/pictureShare.dtd">

<library xmlns="http://www.aol.com/boxely/resource.xsd"
         xmlns:box="http://www.aol.com/boxely/box.xsd"
         xmlns:s="http://www.aol.com/boxely/style.xsd"
         xmlns:on="http://www.aol.com/boxely/reaction.xsd"> 


   
  <style tag="psTooltip" padding="0" margin="0" position="fixed" layer="stack" zIndex="2000" >
    <part name="main" fill="url(#grayWhiteGradient)" overflow="none" flex="1" padding="5" stroke="black" strokeWidth="1" />
  </style>
  <gadget id="psTooltip" type="popup" >
      <attributes showNoActivate="ignoreInput" popupAlign="after_point" title="custom tooltip"/>
      <parts>
        <box:vbox id="main">
          <box:aolLabel inherits="value=fileName" />
          <box:aolLabel inherits="value=buddyName" />    
        </box:vbox>
      </parts>
      <behavior>
      </behavior>
  </gadget>            
 
	<gadget id="multiStatesButton" type="control">
		<attributes focusMode="normal" />
		<behavior inherits="box://aimToolkit/content/behaviors.box#commandable"/>
	</gadget>

    <gadget id="navigation" type="box" language="jscript" script="box://imApp/content/picshare/navigation.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/>
        <parts>
		        <box:spacer id="spacerFlex1"/>

				<box:hbox id="imageButtons">
					<box:multiStatesButton id="rewindButton" style="rewindButtonStyle" inherits="disabled=disableSlideShow"
						on:command="gadget:goBackward();" tooltip="&ps.slideshow.backward_tooltip;" tabIndex="63" />
					<box:spacer id="spacer1" />
					
					<box:multiStatesButton id="playButton" style="playButtonStyle" inherits="disabled=disableSlideShow"
						on:command="gadget:doPlay();" tooltip="&ps.slideshow.play_tooltip;" tabIndex="64" />	
					<box:multiStatesButton id="pauseButton" style="pauseButtonStyle" inherits="disabled=disableSlideShow"
						on:command="gadget:doStop();" tooltip="&ps.slideshow.pause_tooltip;" tabIndex="65" />

					<box:spacer id="spacer2" />
					<box:multiStatesButton id="forwardButton" style="forwardButtonStyle" inherits="disabled=disableSlideShow"
						on:command="gadget:goForward();" tooltip="&ps.slideshow.forward_tooltip;" tabIndex="66"/>
				</box:hbox>
		        		
		        <box:spacer id="spacerFlex2"/>

				<box:hbox id="picNumberShowing" collapsed="true" >
					<box:aolLabel id="picIndex" inherits="value=picIndexInFocus" />					
					<box:aolLabel value="&ps.slideshow.of;" />
					<box:aolLabel id="numberOfPics" inherits="value=totalNumberOfPics" />			
				</box:hbox>		
				
		        <box:spacer id="spacerFlex3"/>
				<box:hbox id="slideshowControl" inherits="disabled=disableSlideShow" >				
					<box:aolLabel value="&ps.slideshow.display;" />
					<box:aolSlider id="slider" max="30" scale="5" value="5" tabIndex="67">
						<box:binding elementSource="_gadget" targetProperty="value" path="displaySeconds" method="twoWay"/>
					</box:aolSlider>
					<box:aolLabel id="sliderLabel" inherits="value=displaySeconds" />
					<box:aolLabel value="&ps.slideshow.seconds;" />				
				</box:hbox>	
				<box:spacer id="spacer3"/>

        </parts>
        <behavior>
 			<reaction event="attributeSet" attributeName="displaySeconds" action="gadget:onTimeoutValueChange();"/>
        </behavior>
    </gadget>
	<style tag="navigation" padding="1" >
	    <part name="imageButtons" hAlign="left" vAlign="center" flex="1" />  
	    <part name="picNumberShowing" hAlign="middle" vAlign="center" flex="1" />  
	    <part name="slideshowControl" hAlign="right" vAlign="center" flex="2" marginRight="2" />  
	    <part name="slider" width="50"/>     
	    <part name="sliderLabel" width="12"/>      	    
	    
	     
	    <part name="spacerFlex1" minWidth="2" flex="1"/>     
	    <part name="spacerFlex2" minWidth="2" flex="1"/>     
	    <part name="spacerFlex3" minWidth="2" flex="1"/>            
    
	    <part name="spacer1" width="2"/>     
	    <part name="spacer2" width="2"/>     
	    <part name="spacer3" width="1"/>     
	</style>

    
    <gadget id="titleBar" type="box" language="jscript" script="box://imApp/content/picshare/titleBar.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/>
        <attributes disableMenuItems="true" />       
        <parts>
            <box:hbox id="body">     
                <box:hbox id="menus">            
				    <box:aolButton id="addPicture" label="&ps.titlebar.sharepictures;" acceltext="&ps.titlebar.sharepictures_acceltext;" 
									tooltip="&ps.titlebar.sharepictures_tooltip;" on:command="gadget:onAddPicture();" tabIndex="61"/>

				    <box:aolMenuButton id="actionButtons" label="&ps.titlebar.actions;" inherits="disabled=disableMenuItems" 
									acceltext="&ps.titlebar.actions_acceltext;" tooltip="&ps.titlebar.actions_tooltip;" tabIndex="62">
					    <box:menuPopup style="popupWithoutTransition">
							<box:aolCheckMenuItem id="trackBuddy" label="&ps.titlebar.buddyview;" disabled="false" toggled="true" on:command="gadget:onTrackBuddy();" accesskey="&ps.titlebar.buddyview_accesskey;" />	
						    <box:aolMenuSeparator />      
						    <box:aolMenuItem label="&ps.titlebar.saveselection;" on:command="gadget:onSaveTo();" accesskey="&ps.titlebar.saveselection_accesskey;" />
						    <box:aolMenuItem label="&ps.titlebar.saveall;" on:command="gadget:onSaveAllTo();" accesskey="&ps.titlebar.saveall_accesskey;" />
						    <box:aolMenuItem label="&ps.titlebar.delete;" on:command="gadget:onDelete();" accesskey="&ps.titlebar.delete_accesskey;" />
						    <box:aolMenuSeparator />
						    <box:aolCheckMenuItem id="playSlideShow" label="&ps.titlebar.playslideshow;" on:command="gadget:onSlideShow();" accesskey="&ps.titlebar.playslideshow_accesskey;" />
					    </box:menuPopup>
				    </box:aolMenuButton>							
				</box:hbox>
                <box:navigation id="navigation" disableSlideShow="true" displaySeconds="2" />								         
			</box:hbox>                 
        </parts>
    </gadget>
	<style tag="titleBar" padding="1" stroke="white" strokeWidth="3" >
	    <part name="body" vAlign="center" flex="1" fill="white"/>
	    <part name="addPicture" width="40" height="10" />
	    <part name="menus" vAlign="center" flex="1" fill="white"/>
	    <part name="navigation" hAlign="right" vAlign="center" flex="2" />  
	</style>

    <gadget id="focuspicture" type="control" language="jscript" script="box://imApp/content/picshare/focuspicture.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/>        
        <parts>
            <box:vbox id="verticalbox" >
                <box:vbox id="container">
 					<box:image id="image" context="actionmenu">
					</box:image> 
                    <box:aollabel id="initialInstruction" value="&ps.focuspicture.initialInstruction;" inherits="collapsed=hideInitialInstruction"/>
                    <box:aollabel id="buddyViewInstruction" value="&ps.focuspicture.buddyview;" collapsed="true"/>
                </box:vbox>
                <box:hbox id="labelcontainer">
					<box:spacer id="spacer1" />
					<box:aollabel id="label" inherits="value=labelName,$textColor=labelColor,$fontSize=fontSize" />
					<box:spacer id="spacer2" />
				</box:hbox>
            </box:vbox>
            
			<box:menuPopup id="actionmenu" style="popupWithoutTransition" popupAlign="cursor_left_top">
				<box:aolMenuItem label="&ps.primarypic.savepicture;" on:command="gadget:onSaveTo();" accesskey="&ps.primarypic.savepicture_accesskey;" />
				<box:aolMenuItem label="&ps.primarypic.deletepicture;" on:command="gadget:onDelete();" accesskey="&ps.primarypic.deletepicture_accesskey;" />		
			</box:menuPopup>     
			
        </parts>
         <behavior>
            <reaction event="layout" action="gadget:updateFocusPicture();" />  
        </behavior>               
    </gadget>
	<style tag="focuspicture" >
	    <part name="verticalbox" hAlign="stretch" vAlign="center" flex="1" />
	    <part name="container"  hAlign="center" vAlign="center" flex="1" width="auto" height="auto" maxWidth="auto" maxHeight="auto" overflow="hidden"/>
	    <part name="labelcontainer" hAlign="center"/>  
	    <part name="initialInstruction" textColor="white" fontSize="16" />
	    <part name="buddyViewInstruction" textColor="black" fontSize="9" wordwrap="true" hAlign="center" vAlign="center"/>     
	    <part name="spacerFlex1" minWidth="60" flex="1"/>     
	    <part name="spacerFlex2" minWidth="60" flex="1"/>     
	</style>

    <gadget id="picture" type="control" language="jscript" script="box://imApp/content/picshare/picture.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/> 
        <attributes selectableMode="item" focusMode="defer" sender="" customTooltip="psTooltip"/> 
        <parts>
            <box:hbox id="container">
				<box:box>
					<box:image id="image"/>
					<box:image id="buddyIndicator" src="box://imApp/theme/images/org_square.png" inherits="collapsed=hideBuddyIndicator" />
				</box:box>
			</box:hbox>
        </parts>
        <behavior inherits="box://aimToolkit/content/behaviors.box#commandable">
			<reaction event="mouseOver" action="gadget:onMouseOver();"/>
        </behavior>
    </gadget>
	<style tag="picture" margin="5" >		
	    <part name="container"  hAlign="center" vAlign="center" flex="1"/>
	    <part name="image" maxHeight="66" maxWidth="70"  strokeWidth="3" strokeLayer="above" stroke="white" >
			<state name="hovered" stroke="#9C9C9C" strokeWidth="3"/>
			<state name="selected" stroke="#FFD700" strokeWidth="3"/>
			<state name="focused" stroke="#EE7600" strokeWidth="3"/>  
	    </part>
	    <part name="buddyIndicator" position="fixed" top="0" right="0" /> 
	</style>	
    
    <gadget id="picturecontainer" type="select" language="jscript" script="box://imApp/content/picshare/picturecontainer.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/>
        <attributes selectMode="multiple"/>
        <parts>
  			<box:hbox id="scroller" /> 	
        </parts>
        <behavior inherits="box://aimToolkit/content/behaviors.box#listBox" >
            <reaction event="layout" action="gadget:updateScrollbar();" />  
            <reaction event="select" action="gadget:afterPictureSelected();"/>
			<reaction event="keyPress" keyCode="LEFT" action="gadget:goBackward();"/>
			<reaction event="keyPress" keyCode="RIGHT" action="gadget:goForward();"/>                  
        </behavior>
    </gadget>
	<style tag="picturecontainer" hAlign="stretch" fill="url(#grayWhiteGradient)">
	    <part name="scroller" flex="1" fill="url(#grayWhiteGradient)" hAlign="center" axis="x" overflow="scroll" maxWidth="auto" stroke="white" strokeWidth="1"/>
	</style>

    <gadget id="pictureshare" type="box"  language="jscript" script="box://imApp/content/picshare/pictureshare.js">
        <script language="jscript" href="box://imApp/content/picshare/utils.js"/> 
        <attributes hideBottomRow="true" collapsed="true" />       
        <parts>
            <box:vbox id="box">			 	
                <box:focuspicture id="focuspicture" labelColor="white" fontSize="12" hideInitialInstruction="false" focusMode="ignore" />
 				<box:hbox>
					<box:aolTabScroller id="titleScrollerX" axis="x" >
						<box:titleBar id="titleBar" disableMenuItems="true" />
					</box:aolTabScroller>  
				</box:hbox>        
                <box:hbox id="bottomrow" inherits="collapsed=hideBottomRow">
                    <box:picturecontainer id="picturecontainer" tabIndex="68" />
                    <box:focuspicture id="buddypic" labelName="&ps.filmstrip.buddyview;" labelColor="black" fontSize="11" collapsed="false" hideInitialInstruction="true" focusMode="ignore"/>      
                </box:hbox>
            </box:vbox>
        </parts>
         <behavior>  
     
            <reaction event="boxDestroyed" action="gadget:onBoxDestroyed();"/>  
            <reaction event="dragDrop" action="gadget:afterDragDrop();" />
            <reaction event="dragOver" action="gadget:onDragOver();" />
        </behavior>       
    </gadget>
	<style tag="pictureshare" paddingTop="2" flex="1" fill="white">
	    <part name="box" flex="1"/>
	    <part name="titleScrollerX" flex="1" fill="white"/>
	    <part name="titleBar" flex="1"/>
	    <part name="focuspicture" flex="1" minWidth="100" minHeight="100" fill="black" padding="4" stroke="white" strokeWidth="2"/>
	    <part name="bottomrow" height="80" />
	    <part name="picturecontainer" flex="2" collapsed="true"/>
	    <part name="buddypic" fill="url(#grayWhiteGradient)" height="80" width="90" minHeight="70" minWidth="80" stroke="gray" strokeWidth="1"/>
	</style>	
	
</library>