MIS 3371 SPRING 2012 FINAL PARKS

U-FRAME-THE-CAPTAIN
1. Wood frame style:
Ash
Teak
Walnut
2. Frame width&height: (in pixels, name='fd')
3. Mat color:
    Red     (0 to 255, name='cr')
    Green  (0 to 255, name='cg')
    Blue   (0 to 255, name='cb')
4. Mat width&height: (in pixels, name='md')
5. Image width: (in pixels name='iw')
6. Image height: (in pixels, name='ih')

 1. (50 points) The data to the left has: a form named f1; a button labelled "execute p1" that executes the javascript function named p1; and a set of choices to determine how to frame and display the image named "capt0001.gif". The values shown in bold-face to the left are the HTML object names. p1 produces a new page (on-the-fly) with three parts: (1) the main image capt0001.gif (ih by iw pixels); surrounded by a colored mat (md pixels wide of color red=cr; green=cg; blue=cb); and a frame surounding the mat composed of four images (2 vertical and 2 horizontal images) of the chosen wood.
Notes:
  • the total width, tw = 2*fd + 2*md + iw; and
  • the total height, th = 2*fd + 2*md + ih
  • The mat is a DIV block with width = tw, height = th, top = 0, left = 0
         and backgroundColor:rgb(cr,cg,cb) with z-index:1
  • The main image has: width = iw; height = ih; top = fd + md; left = fd + md; z-index = 2
  • The frame is made of four images, each has z-index=3 AND:
    Frame images
    Wood
    chosen    		 Top & Bottom
    image    		 Left & Right
    image
    Ash plywood_h.jpg plywood_v.jpg
    Teak plywood_h2.jpg plywood_2v.jpg
    Walnut plywood_h3.jpg plywood_3v.jpg
    Frame images CSS Properties
    frame
    image
    CSS    		top
    image    		bottom
    image    		left
    image    		right
    image
    heightfdfd 2*md+ih 2*md+ih
    widthtw tw fd fd
    top0 fd+2*md+ihfd fd
    left0 0 0 fd+2*md+iw

    Write only the javascript code for p1. Show NO HTML. 
    • <XML id="mg"> <?xml version="1.0"?>
<!DOCTYPE top_grossing_movies [
<!ELEMENT top_grossing_movies(reportdate,movie+)>
<!ELEMENT reportdate (#PCDATA)>
<!ELEMENT movie (title,year,gross)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT gross (#PCDATA)>
]>
<top_grossing_movies>
<reportdate>April 27 2012</reportdate>
<movie><title>Avatar</title><year>2009</year>
<gross>760,505,847</gross></movie>
<movie><title>Titanic</title><year>1997</year>
<gross>600,779,824</gross></movie>
<movie><title>The Dark Knight</title><year>2008</year>
<gross>533,316,061</gross></movie>
<movie><title>Star Wars: Episode IV - A New Hope</title>
<year>1977</year>
<gross>460,935,665</gross></movie>
<movie><title>Shrek 2</title><year>2004</year>
<gross>436,471,036</gross></movie>

...lotsa movies missing ...

<movie><title>You Don't Mess with the Zohan</title>
<year>2008</year>
<gross>100,018,837</gross></movie>
<movie><title>Die Hard: With a Vengeance</title>
<year>1995</year>
<gross>100,012,500</gross></movie>
<movie><title>Collateral</title><year>2004</year>
<gross>100,003,492</gross></movie>
</top_grossing_movies></XML>
    		 2. (50 points) An XML data island with id=mg contains information on all US movies that have grossed more than $100 million in descending gross revenue order. The DTD and a small partial list of the data is shown to the left. Using this XML data create TWO reports:
    • a 4 column report that has:
       • in first table row the reportdate or root.childNodes[0].text
       • then for each movie produce one row (there are 1 to
        root.childNodes.length movies) containing:
             • rank (for the 1st movie the rank is 1, the 2nd is 2, etc.)
             • title of the movie is root.childNodes[i].childNodes[0].text
             • year is root.childNodes[i].childNodes[1].text
             • gross US revenue is root.childNodes[i].childNodes[2].text
    • a 7 row 2 column report that contains a count of the number of movies in the second column and the 7 labels below in the first column:
    Gross is > $100,000,000
    Gross is > $200,000,000
    Gross is > $300,000,000
    Gross is > $400,000,000
    Gross is > $500,000,000
    Gross is > $600,000,000
    Gross is > $700,000,000
    Use an array named t to accumulate these counts as you produce the first table. When this button is clicked a javascript function named p2 is executed and it produces the two required tables above on a new HTML page (i.e., on-the-fly).

    Show NO HTML. Show only the javascript for p2.

    Data from http://www.imdb.com/boxoffice/alltimegross