How do you pass vars to view thru to javascript?

[eluser]zimco[/eluser]
I am trying to use the Gnu Bookreader in a CI app i am building and i ran into some trouble, as my understanding of javascript is limited, so forgive my stupidity. I am trying to read in XML file that contains data related to the book that the Bookreader needs to display it, but i cannot figure out how to pass the variables from the CI controller, to the CI view that invokes the javascript for the Bookreader, to the javascript file. Which probably does not make a whole lot sense without seeing some code, so here's what i have:

CONTROLLER

Code:

function index() {
    $data['css'] = $this->css;
       $data['base'] = $this->base;
       $data['loadmyjavascript'] = TRUE;

    $itemPath = $this->config->item('XML_LOCATION');// LOCATION OF XML FILE
    $scanDataZip = $this->config->item('ZIP_LOCATION');// LOCATION OF ZIP FILE
    
    $scanDataFile = $itemPath."scandata.xml";
    //echo $scanDataFile;

    if (file_exists($scanDataFile)) {
        $scanData = simplexml_load_file($scanDataFile);
    } else if (file_exists($scanDataZip)) {
        $cmd  = 'unzip -p ' . escapeshellarg($scanDataZip) . ' scandata.xml';
        exec($cmd, $output, $retval);
    if ($retval != 0) GBFatal("Could not unzip ScanData!");
        $dump = join("\n", $output);
        $scanData = simplexml_load_string($dump);
    } else if (file_exists("$itemPath/scandata.xml")) {
    // For e.g. Scribe v.0 books!
        $scanData = simplexml_load_file("$itemPath/scandata.xml");
    } else {
        GBFatal("ScanData file not found!");
    }
    
    $leafCount = $scanData->bookData->leafCount;
    $data['leafCount'] = $leafCount;
    $width = $scanData->pageData->page->origWidth;
    $data['width'] = $width;
    $height = $scanData->pageData->page->origHeight;
    $data['height'] = $height;
    
    $this->load->vars($data);
    $this->template->display('bookreader');
    //Also tried and did not work: $this->template->display('bookreader',$data);
    }

VIEW

Code:

<div id="GnuBook" style="left:10px; right:10px; top:30px; bottom:30px;">x</div>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/GnuBookJSIA.php"></scrpt>

JAVASCRIPT - /js/GnuBookJSIA.php

Code:

<?php
/*
Copyright(c)2008 Internet Archive. Software license AGPL version 3.

This file is part of GnuBook.

    GnuBook is free software:...
*/
//Trying to pass in my variables to set them in this script.
echo $leafCount; //generates undefined variable errors
echo $width;    //generates undefined variable errors
echo $height;    //generates undefined variable errors

//$firstLeaf = $scanData->pageData->page[0]['leafNum'];
?>

gb = new GnuBook();

<?php
/* Output title leaf if marked */
$titleLeaf = '';
foreach ($scanData->pageData->page as $page) {
    if (("Title Page" == $page->pageType) || ("Title" == $page->pageType)) {
        $titleLeaf = "{$page['leafNum']}";
        break;
    }
}
    
if ('' != $titleLeaf) {
    printf("gb.titleLeaf = %d;\n", $titleLeaf);
}
?>

gb.getPageWidth = function(index) {
    //return '<?php echo $width;?>';
    return this.pageW[index];
}

gb.getPageHeight = function(index) {
    //return '<?php echo $height;?>';
    return this.pageH[index];
}

gb.getPageURI = function(index) {
    var leafStr = '0000';            
    var imgStr = this.leafMap[index].toString();
    var re = new RegExp("0{"+imgStr.length+"}$");
    
    var insideZipPrefix = this.subPrefix.match('[^/]+$');
    var file = insideZipPrefix + '_' + this.imageFormat + '/' + insideZipPrefix + '_' + leafStr.replace(re, imgStr) + '.' + this.imageFormat;
    
    // $$$ add more image stack formats here
    if (1==this.mode) {
        var url = 'http://'+this.server+'/GnuBook/GnuBookImages.php?zip='+this.zip+'&file;='+file+'&scale;='+this.reduce;
    } else {
        var ratio = this.getPageHeight(index) / this.twoPageH;
        var scale;
        // $$$ we make an assumption here that the scales are available pow2 (like kakadu)
        if (ratio <= 2) {
            scale = 1;
        } else if (ratio <= 4) {
            scale = 2;
        } else {
            scale = 4;
        }        
    
        var url = 'http://'+this.server+'/GnuBook/GnuBookImages.php?zip='+this.zip+'&file;='+file+'&scale;='+scale;
        
    }
    return url;
}

gb.getPageSide = function(index) {
    //assume the book starts with a cover (right-hand leaf)
    //we should really get handside from scandata.xml
    
    &lt;?php // Use special function if we should infer the page sides based off the title page index
    if (preg_match('/goog$/', $id) && ('' != $titleLeaf)) {
    ?&gt;
    // assume page side based on title page
    var titleIndex = gb.leafNumToIndex(gb.titleLeaf);
    // assume title page is RHS
    var delta = titleIndex - index;
    if (0 == (delta & 0x1)) {
        // even delta
        return 'R';
    } else {
        return 'L';
    }
    &lt;?php
    }
    ?&gt;
    
    // $$$ we should get this from scandata instead of assuming the accessible
    //     leafs are contiguous
    if ('rl' != this.pageProgression) {
        // If pageProgression is not set RTL we assume it is LTR
        if (0 == (index & 0x1)) {
            // Even-numbered page
            return 'R';
        } else {
            // Odd-numbered page
            return 'L';
        }
    } else {
        // RTL
        if (0 == (index & 0x1)) {
            return 'L';
        } else {
            return 'R';
        }
    }
}
.
.
.
.

How can i pass the variables from my controller to the javascript in the view?