<HTML>
<HEAD>
  <TITLE>Customize</TITLE>
<SCRIPT LANGUAGE = "JavaScript">

<!--

// set expiration date to one year
var expdate = new Date();
expdate.setTime (expdate.getTime() + 31536000000);

// this function gets a cookie
function getCookie(name){
var fname = name + "=";               
var dc = document.cookie;            
    if (dc.length > 0) {             
    offset = dc.indexOf(fname);      
        if (offset != -1) {           
        offset += fname.length;       
        var end = dc.indexOf(";", offset);
            if (end == -1) end = dc.length;
            return unescape(dc.substring(offset, end));
        } 
    }
return null;
}

// this function sets a cookie
function setCookie(name, value) {
document.cookie = name + "=" + escape(value) + 
"; expires=" + expdate.toGMTString() +  "; path=/";
}

// this function deletes a cookie
function delCookie(name) {
var expireNow = new Date();
document.cookie = name + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT" +  "; path=/";
}

// Channel 1 : Business
// Channel 2 : Design
// Channel 3 : Diversions
// Channel 4 : Programming
// Channel 5 : Technology

// Cookies
// Channel Ratings : "wr_channels" | VALUES : 12345
// Personal Name   : "wr_name"     | VALUES : ANY
// What's New      : "wr_new"      | VALUES : "true", "false"

// Chips
// What's New Log  : "wr_new_log"  | VALUES : "article #" + "true", "false" (if article is new then true)
// Line 50
// NAME gives channel 1 - 5 , VALUE gives importance 1 - 5
// alert("Channel: " + radio.name + " Importance: " + radio.value)

// detect if something is not null or ""; return true
function notEmpty(value) {
return (value != null && value.length != 0);
}

// get a channel value
function getChannel(channel) {
// get channels off cookie
var channels = getCookie('wr_channels');
    if (notEmpty(channels)) {
    // find the placement, and then value, of the channel's importance in the channel cookie
    var importance = parseInt(channels.substring(channel - 1, channel));
    // if the importance is 0, then return null, otherwise return value
    return ((importance == 0) ? null : importance);
    }
    else return null;
}

// set a channel value
function setChannel(channel, importance) {
// get channels off cookie
var channels = getCookie('wr_channels');
    // make sure there is a channels cookie, if not make blank one
    if (!notEmpty(channels)) channels = '00000';
    // set new channel value
    setCookie('wr_channels', channels.substring(0, channel - 1) + importance + channels.substring(channel, 5));
}

// an addition to setChannel, this takes a radio object as an argument,
// clears any other radio buttons in same column, and finally sets the 
// corresponding channel to a value based on the radio object's name 
// and value
function setChannelRadio(radio) {
    for (var i = 1; i < 6; i++) {
        // if its not the current channel
        if (i != parseInt(radio.name.substring(1,2))) {
            // and if the channel is at the same value as the current one
            if (eval('document.customize.' + ('c' + i) + '[' + (5 - parseInt(radio.value)) + '].checked') == true) {
            // then reset the channel on the form
            eval('document.customize.' + ('c' + i) + '[' + (5 - parseInt(radio.value)) + '].checked = false');
            // and reset the channel in the cookie
            setChannel(i, 0);
            }
        }
    }
// set the channels
setChannel(parseInt(radio.name.substring(1,2)), parseInt(radio.value));
}

// function to set name
function setName(text) {
setCookie('wr_name', text.value);
} // Line 100

// function to toggle what's new 
function setWhatsNew(radio) {
    if (radio.value == "true") setCookie('wr_new', 'true');
    else setCookie('wr_new', 'false');
}

// this function sets up the radio buttons and other form elements
// according to the values stored on the cookie
function fixForms() {
    // get name off cookie, if not empty display in form
    var wr_name = getCookie('wr_name');
    if (notEmpty(wr_name)) document.customize.wr_name.value = wr_name;
    for (var i = 1; i < 6; i++) {
    var importance = getChannel(i);
        // if there is an importance for the channel
        if (importance != null) {
        // reflect that importance on the form
        eval('document.customize.' + ("c" + i) + '[' + (5 - parseInt(importance)) + '].checked = true');
        }
        // otherwise reset that channel on the form (for good measure)
        else {
            for (var j = 0; j < 5; j++) {
            eval('document.customize.' + ("c" + i) + '[' + j + '].checked = false');
            }
        }
    }
// set whats new radio
var wr_new = getCookie('wr_new');
// line 130, if wr_new is true, then check radio wr_new[0], otherwise wr_new[1]
    if (notEmpty(wr_new)) document.customize.wr_new[((wr_new == 'true') ? 0 : 1)].checked = true; 
}

// this function is used to check the "validity" (if they've all been rated)
// of the channel ratings, but on the form, not on the cookie. To check the 
// validity of the the channel ratings on the cookie, use getChannel() for one
// (if null, then not valid) or use getCookie('wr_channels') for all, if null
// not valid
function checkChannels() {
    for (var i = 1; i < 6; i++) {
    var channelRated = false;
        for (var j = 0; j < 5; j++) {
            if (eval('document.customize.' + ('c' + i) + '[' + j + '].checked') == true) channelRated = true;
        }
        if (channelRated == false) return false     
    }
return true;
}

// this function checks all the forms, looks for mistakes, and alerts user.
// if everything is in order, the form is left as is and the user is brought to
// a thank you page (or Web Review's main page)
function checkPrefs() {
    with (document.customize) {
        if (wr_name.value.length == 0) {
        alert('Please fill in your name.');
        wr_name.focus();
        }
        else if (!checkChannels()) { 
        alert('Please rate all of the channels.');
        c1[0].focus();
        }
        else if (wr_new[0].checked == false && wr_new[1].checked == false) {
        alert('Please decide if you\'d like the \"What\'s New\" feature.');
        wr_new[0].focus();
        }
        else {
        parent.location.href = 'index.html';
        }
    }
}

// this deletes the preferences on the cookies and on the form (by reset)
function delPrefs() {
    if (confirm('This will remove all of your preferences as well as your \"What\'s New\" log. Are you sure you want to do this?')) {
    delCookie('wr_name');
    delCookie('wr_channels');
    delCookie('wr_new');
    delCookie('wr_new_log');
    setCookie('wr_reload', 'true');
    parent.location.href = 'index.html';
    return true;
    }
    // if user cancels, don't reset form
    else return false;
}

//-->

</SCRIPT>
</HEAD>
<BODY onLoad = "fixForms()">
<FORM NAME = "customize"> 
<TABLE CELLPADDING = 0 CELLSPACING = 0 WIDTH = "455">
  <TR>
    <TD WIDTH = "5%"></TD>
    <TD>
      <FONT SIZE = "5" FACE = "Arial">Web Review Preferences</FONT>
      <P>
      <FONT SIZE = "3">
      <B><FONT SIZE = 5 FACE = "Arial">1.</FONT></B>
      Please tell us your name (or at least what you would like us to call you.) 
      This way we'll be able to indentify you every time you return to Web Review.
      </FONT>
        <BLOCKQUOTE>
        <TABLE CELLPADDING = 5 CELLSPACING = 0>
          <TR>
            <TD>
              <FONT FACE = "Arial">Your Name:</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "TEXT" NAME = "wr_name" onChange = "setName(this)"> 
            </TD>
          </TR>
        </TABLE>
        </BLOCKQUOTE>
      <FONT SIZE = "3">
      <B><FONT SIZE = 5 FACE = "Arial">2.</FONT></B>
      Tell us what interests you. Because Web Review is divided into 
      five channels, we'd like you to rate each of the channels according 
      to their importance and relevance to you. This information will be 
      used to tailor Web Review's interface (to fit your needs and interests).
      Rate each channel from 1 to 5, where 1 is the least important and 5
      is the most important.
      </FONT>
        <BLOCKQUOTE>
        <TABLE BORDER = 0 CELLSPACING = 0 CELLPADDING = 10>
          <TR>
            <TD>
              <FONT FACE = "Arial">Importance Rating:</FONT>
            </TD>
            <TD>
              <FONT FACE = "Arial">5</FONT>
            </TD>
            <TD>
              <FONT FACE = "Arial">4</FONT>
            </TD>
            <TD>
              <FONT FACE = "Arial">3</FONT>
            </TD>
            <TD>
             <FONT FACE = "Arial">2</FONT>
            </TD>
            <TD>
              <FONT FACE = "Arial">1</FONT>
            </TD>
          </TR>
          <TR BGCOLOR = "Green">
            <TD>
              <FONT COLOR = "#FFFFFF" FACE = "Arial">BUSINESS</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c1" VALUE = "5"  onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c1" VALUE = "4" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c1" VALUE = "3" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c1" VALUE = "2" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c1" VALUE = "1" onClick = "setChannelRadio(this)">
            </TD>
          </TR>
          <TR BGCOLOR = "Purple">
            <TD>
              <FONT COLOR = "#FFFFFF" FACE = "Arial">DESIGN</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c2" VALUE = "5" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c2" VALUE = "4" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c2" VALUE = "3" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c2" VALUE = "2" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c2" VALUE = "1" onClick = "setChannelRadio(this)">
            </TD>
          </TR>
          <TR BGCOLOR = "#AC0000">
            <TD>
              <FONT COLOR = "#FFFFFF" FACE = "Arial">DIVERSIONS</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c3" VALUE = "5" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c3" VALUE = "4" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c3" VALUE = "3" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c3" VALUE = "2" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c3" VALUE = "1" onClick = "setChannelRadio(this)">
            </TD>
          </TR>
          <TR BGCOLOR = "#6A3500">
            <TD>
              <FONT COLOR = "#FFFFFF" FACE = "Arial">PROGRAMMING</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c4" VALUE = "5" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c4" VALUE = "4" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c4" VALUE = "3" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c4" VALUE = "2" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c4" VALUE = "1" onClick = "setChannelRadio(this)">
            </TD>
          </TR>
          <TR BGCOLOR = "#400080">
            <TD>
              <FONT COLOR = "#FFFFFF" FACE = "Arial">TECHNOLOGY</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c5" VALUE = "5" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c5" VALUE = "4" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c5" VALUE = "3" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c5" VALUE = "2" onClick = "setChannelRadio(this)">
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "c5" VALUE = "1" onClick = "setChannelRadio(this)">
            </TD>
          </TR>
        </TABLE>
      </BLOCKQUOTE>
      <FONT SIZE = "3">
      <B><FONT SIZE = 5 FACE = "Arial">3.</FONT></B>
      Do you want to know what's new? When you read an article on Web Review,
      that article is marked as read. Would you like to have unread articles 
      displayed more prominently than those you've already read (in other words,
      do you want to have us show you what's new)?
        <BLOCKQUOTE>
        <TABLE CELLPADDING = 5 CELLSPACING = 0>
          <TR>
            <TD>
              <FONT FACE = "Arial">Show What's New:</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "wr_new" VALUE = "true" onClick = "setWhatsNew(this)"><FONT FACE = "Arial">  Yes</FONT>
            </TD>
            <TD>
              <INPUT TYPE = "RADIO" NAME = "wr_new" VALUE = "false" onClick = "setWhatsNew(this)"><FONT FACE = "Arial">  No</FONT>
            </TD>
          </TR>
        </TABLE>
        </BLOCKQUOTE>
      </FONT>
      <FONT SIZE = "3">
      <B><FONT SIZE = 5 FACE = "Arial">4.</FONT></B>
      Now that you've customized Web Review, its time to save your preferences. If
      you wish to remove all your changes and remain "anonymous", however, you may
      choose the remove option (where's the fun in that though).
        <BLOCKQUOTE>
        <TABLE CELLPADDING = 5 CELLSPACING = 0>
          <TR>
            <TD>
             <FONT FACE = "Arial">Save Your Preferences:</FONT>
            </TD>
            <TD>
             <INPUT TYPE = "BUTTON" VALUE = "  Save   " onClick = "checkPrefs()">
            </TD>
            <TD>
             <INPUT TYPE = "RESET" VALUE = "Remove" onClick = "return delPrefs()">
            </TD>
          </TR>
        </TABLE>
        </BLOCKQUOTE>
    </FONT>
    </TD>
   </TR>
</TABLE>
</FORM>
</BODY>
</html>