Smart Phones with product rating

PHP/HTML Source:

require_once 'raxan/pdi/autostart.php';

class NewPage extends RaxanWebPage {
    protected function _config() {
        $this->masterTemplate = 'views/master.homepage.html';


    protected function listPhones($e) {
        $phones = $this->Raxan->importCSV('data/phones.csv');
        return $phones;

    protected function setRating($e) {
        $p = $e->val();
        $index = $p['index'];
        $rate = $p['rate'];
        return $rate;



<hr class="space" />
<div class="c20 ui-widget ui-widget-shadow rax-fixed-shadow">
    <div class="round white pad">
        <div class="round hlf-pad bmm">
            <span id="nextbtn" class="right ui-icon ui-icon-carat-1-e round lightgray click-cursor" style="margin-left:2px"></span>
            <span id="prevbtn" class="right ui-icon ui-icon-carat-1-w round lightgray click-cursor"></span>
            <h3 class="bottom">Smart Phones</h3>
        <p id="infotext">Click the arrows at the top to view the latest Smart Phones in our product catalog.</p>
        <hr class="clear" />
        <form id="frmRating" class="hide">
            Rating: <span id="stars-cap"></span>
            <div id="stars">
                <select name="rating">
                    <option value="1">Very poor</option>
                    <option value="2">Not that bad</option>
                    <option value="3">Average</option>
                    <option value="4">Good</option>
                    <option value="5">Perfect</option>
            <div id="rateloader" class="hide"><img src="views/images/preloader-arrows.gif" alt="."  align="left"/>&nbsp;<em>Saving....</em></div>
        <br class="clear" />

<script type="text/javascript">
    // <![CDATA[
        var index,phones;
        function showPhones(i) {
            if (!i||i<0) i = 0;
            else if (i>phones.length-1) i = phones.length-1;
            var rate = phones[i]['rate'];
            var html = '<img class="left margin" src="views/images/'+phones[i]['photo']+'" />' + 
                '<h2 class="bottom">'+phones[i]['desc']+'</h2>' +
            var t = $('#infotext')
            if(!rate) rate = 0;
            index = i;

        $('#prevbtn,#nextbtn').click(function() {
            index = ('prevbtn') ? --index : ++index;
            if (phones) showPhones(index);
            else {
                Raxan.dispatchEvent('getphones', function(result,status){
                    if (!status) return;
                    phones = result;

        // rating
            captionEl: $("#stars-cap"),
            inputType: "select",
            oneVoteOnly: true,
            callback: function(ui, type, value){
                var loader = $('#rateloader');
      ; $('#stars').hide();
                Raxan.dispatchEvent('rateproduct', {index:index, rate:value}, function(result,status){
                    if (!status) return;
                    phones[index]['rate'] = result;


    // ]]>

Plugin Source:

HTML/JavaScript Source:

Data Source (data/phones.csv):
1,IPH01,iPhone,200,iphone.jpg,The iPhone is an Internet and multimedia enabled smartphone designed and marketed by Apple Inc. The iPhone functions as a camera phone and a portable media player.
2,IPH02,iPhone 3Gs,150,iphone3gs.jpg,"iPhone 3GS is a GSM cell phone that's also an iPod, a video camera, and a mobile Internet device with email and GPS maps."
3,RIMB,BlackBerry Bold,160,blackberry.jpg,The BlackBerry Bold  is a high-end mobile phone data device (smartphone) developed by Research In Motion.
4,DRO1,Motorola Driod,145,droid.jpg,The Motorola Droid is an Android-based smartphone by Motorola distributed by Verizon Wireless in the United States.
5,HTC01,HTC Hero,260,htc.jpg,"HTC Tattoo is all about you. It's the first phone that can be customized inside and out. Decide how your phone looks, then decide what you want to look at."
6,EVO4G,HTC EVO 4G,100,evo.jpg,"The HTC Evo 4G (trademarked in capitals as EVO 4G) is a smartphone developed by the HTC Corporation that was previously known by its codename ""Supersonic""."
7,PRE,Palm Pre,120,pre.jpg,"The Palm Pre phone gives you what you need for work life, personal life, and everything in between. "