/* 
 This file was generated by Dashcode.  
 You may edit this file to customize your widget or web page 
 according to the license.txt file included in the project.
 */

var listController = {
    // This object acts as a controller for the list UI.
    // It implements the dataSource methods for the list.
    
    numberOfRows: function() {
        // The List calls this dataSource method to find out how many rows should be in the list.
        return parks.length;
    },
    
    prepareRow: function(rowElement, rowIndex, templateElements) {
        // The List calls this dataSource method for every row.  templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
        if (templateElements.rowTitle) {
            templateElements.rowTitle.innerText = parks[rowIndex].name;
        }

        // We also assign an onclick handler that will cause the browser to go to the detail page.
        var self = this;
        var handler = function() {
            var park = parks[rowIndex];
            detailController.setPark(park);
            
            var browser = document.getElementById('browser').object;
            browser.goForward(document.getElementById('detailLevel'), park.name);
        };
        rowElement.onclick = handler;
    }
};

var detailController = {
    // This object acts as a controller for the detail UI.
    
    setPark: function(park) {
        this._park = park;
        this._representedObject = park.name;
        
        var detailTitle = document.getElementById('detailTitle');
        detailTitle.innerHTML = this._park.name;
        
        var detailLocation = document.getElementById('detailLocation');
        detailLocation.innerHTML = this._park.location;
        
        var detailDescription = document.getElementById('detailDescription');
        detailDescription.innerHTML = this._park.description;
        
        var detailPrice = document.getElementById('detailPrice');
        detailPrice.innerHTML = this._park.price;
        
        var img = document.getElementById('imgRoom'); 
        img.src = this._park.roomImage;
        //img.naturalHeight = this._park.height;
        //img.naturalWidth = this._park.width;
    }
    
};

//
//
function load()
{
    dashcode.setupParts();
};

// Sample data.  Some applications may have static data like this, but most will want to use information fetched remotely via XMLHttpRequest.
var parks = [
    { name: "Room 1", location: "1st floor", description: "The red room .... For hot dreams ;-)", 
        price: "CHF 160.-", roomImage: "images/room1.jpg", height: "176", width: "235" }, 
    { name: "Room 2", location: "1st floor", description: "The orange room, with a balcony and the view on the Rhône valley ...", 
        price: "CHF 160.-", roomImage: "images/room6.jpg", height: "176", width: "235" }, 
    { name: "Room 3", location: "1st floor", description: "The suite ... the biggest in the house with is white leather bed ...", 
        price: "CHF 210.-", roomImage: "images/room3.jpg", height: "176", width: "235" }, 
    { name: "Room 4", location: "1st floor", description: "One of the best ... try it !", 
        price: "CHF 190.-", roomImage: "images/room4.jpg", height: "235", width: "176" }, 
    { name: "Room 5", location: "2nd floor", description: "Not like the others ..... ", 
        price: "CHF 160.-", roomImage: "images/room5.jpg", height: "176", width: "235" }, 
    { name: "Room 6", location: "2nd floor", description: "The yellow room .... the sun king !", 
        price: "CHF 160.-", roomImage: "images/room6.jpg", height: "235", width: "176" }, 
    { name: "Room 7", location: "2nd floor", description: "For sure the most romantic ... with open fire !", 
        price: "CHF 190.-", roomImage: "images/room7.jpg", height: "176", width: "235" } 
];


function btnVisitClick(event)
{
    var browser = document.getElementById('browser').object;
    browser.goForward(document.getElementById('listLevel'), 'Visit the rooms');
};