jwt_zoom

Description
This script implements increase or decrease in size of an image on the screen. The speed, step size and origin of expansion/contraction can be defined in the script call line or in a supporting list file. Invoking another jwt* script will run in parallel with jwt_zoom.

The script supports a cascade of commands, defined in a list file, to give stunning visual effects on the screen.
Definitions
 The fundamental call line format is :-
         'task_name'( 'prime_name', {name:'element_name',  other_options } )
where:-
'prime_name',  is only used as a default for the 'element_name' and/or 'list_name', if these are  missing from the options section in the call line and/or missing from an associated list file. Normally this field can be any text string or just left blank.
 'list_name',  to be replaced with a name of your choice, is one ot the other_options.  It is the name of the instruction list in the <HEAD> section of th html file and/or in the jwt_list.js file that contains either additional options for a single operation and/or a list of options for cascaded commands. The list: option defines the path to all the other options if they are not given in the call line. The search order for commands and options is given later in this document : 'list_name', is a critical pointer for this search.
'element_name',  to be replaced with a name of your choice, is the cross reference to the placed <div> or <img> within the html file which is defined by the id tag of that element. The element_name, if not given in the call line, MUST be defined in an instruction list which is referenced by having list: 'list_name', defined in the options section. If not found here, the element name will ultimately default to the 'prime_name', if that exists. The program cannot run without an element name defined.
'task_name' (see later for running in a cascade) is the function  to be run such as jwt_move or jwt_zoom.
other_options associated with the declared task can be included in the call line within the curly {}  and/or in the named list.

The code has been written to have a priority look-up for each option :-
                (1)  call line  --> (2)  list file option  -->  (3) list file default_name  -->  (4) prime_name
Unfortunately there are a few exceptions to this general search order :-
Script call line in html
 The fundamental call line can be modified in several ways to define the essential 'element_name' and 'task_name'  :-
              jwt_zoom( , {name:'element_name',  other options } )
              jwt_zoom( 'element_name, { other options } )
  This second case works according to the search rules above -- instruction list is not available s not defined by the list:'list_name' option.
Note if there are no other_options defined the the call linecan be reduced to :-
              jwt_zoom( 'prime_name').
The 'element_name and the 'list_name' will use the  'prime_name'.

Script using instruction list file (in html <HEAD> section or in an associated list file)
All that is required in the html is : <img id = 'element_name' ><script>jwt_zoom( 'element_name' )</script>
Even though the list name will default to the element name, by definition for the search priority given above, it is preferrable to define it in the options section by list:'list_name'
                       <script>jwt_zoom(,{task:'task_name', name: 'element_name', list: :'list_name' } )</script>
The format of the instruction list is very similar to the html call line syntax. In the examples below, several lines of options are given which will be used in cascade operation. Note: the last line in the list does not have atrailng comma.

var jwt_list=new Array();
jwt_list["list_name"]= [
["prime_name", {task:'jwt_zoom', width:200, step:7}],
["prime_name", {task:'jwt_move', moveX:0, moveY:-100, startX:'origin}],
["prime_name", {task:'jwt_move', moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

In a case where it is required to move a different div block or image during the sequece of moves, it is possible to code the list :-

var jwt_list=new Array();
jwt_list["list_name"]= [
["example", {task:'jwt_move', moveX:100, step:7}],
["flag", {task:'jwt_move', moveX:0, moveY:-100, startX:'origin'}],
["prime_name", {name:'example', task:'jwt_move', moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

Note: Even though the the  'element_name' has been specified in two different ways (for illustration) in this list, it is preferrable thatthe name is declared in the options section as shown in the last line.

Finally, in a case where it is required to use a different function in the sequence of cascaded commands, it is possible to code the list :-
var jwt_list=new Array();
jwt_list["list_name"]= [
[,{name:'example',  task:'jwt_move', moveX:100, step:7'}],
[, {name:'flag',  task:'jwt_zoom', width:250, startX:'left', startY:'middle'}],
[, {name:'example',  task:'jwt_move' , moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

zoom options
description option names default values notes  
id name of the block or image to be increased or decreased in size. name: * must be given *
name of list containing commands to be cascaded list: same name as <div> id
The new width of the image width: 0 units px 
The new height of the image height: 0 units px 
The fixed X location of the zoom
startX: "centre" "left"
"centre"
"right"
The fixed Y location of the zoom startY: "middle" "top"
"middle"
"bottom"
The increment used for the zoom
step: 8
 units px
a large number (e.g.9999) will  jump immedately to final location.
Defines the speed of movement
speed: 1 larger number --> slower movement
Delay before next cascade function
delay
0
units sec
Defines where the delay is timed from on current task from
"end"
"start"
"end"
*  Defines a change to another function
task: "jwt_move"  e.g. jwt_move
 * these options are only used for cascaded commands in the list file


Required sub-scripts
jwt_define_arrays defines the arrays used within the main function
jwt-set saves the position before any moves so that a reset is possible
jwt_screen determines the screen dimensions and scroll offsets.
jwt_zoom_loop the loop around for the steps
jwt_feedback
code for generating feedback and delay to avoid using eval()


Zoom notes

from: needs to be used with caution.Must avoid having two functions running on same element otherwise screen picture is a mess.

Examples
The jwt_zoom_example file has an image, defined by id="picture"  which can be increased or decreased in size . The form is only for demonstration purrposes allowing the options to be changed and a position reset to be invoked.  The options will normally be coded into the script call line but in this example page new options can be entered into the form to explore how the script works and to demonstrate the full capability. 

The jwt_it_example file contains 2 marquees (described in the jwt_marquee document) and two elements : a div block and an image which move across the screen The image , a flag, has a simple move defined in the script call line and a zoom at the end of the sequence whereas the div block  has three cascaded movements defined in the list file. In all cases the speed and step size has been set to different values.

Cascading commands
The jwt_it script can be used to sta