/*================================================================
Kinetic Globe My Desktop XML Processor
version:1.0.0
Copyright 2011 Kinetic Globe Pty Ltd
www.kineticglobe.com
ready1@kineticglobe.com
Created Date: 2011-09-02
Modified Date: 2011-10-27
================================================================*/
// globals
var mydesktop_width = 0;
var mydesktop_height = 0;
var salesIndex = 0;
var rentalIndex = 0;
var salesProp = [];
var rentalProp = [];
var residentials;
var rentals;
var salesListVisible = false;
var rentListVisible = false;
var listHeight = 175;
var listBodyHeight = 150;

function SetupHomePage() {
    mydesktop_width = $('#kg_mydesktop').width();
    mydesktop_height = $('#kg_mydesktop').height();
    var html = '<div id="kg_md_left"><div id="kg_md_left_head"></div><div id="kg_md_left_body"><img src="css/load.gif" class="loader" alt="loading"/></div><div id="kg_md_left_footer">';
    html += '</div></div><div id="kg_md_right"><div id="kg_md_right_head"></div><div id="kg_md_right_body"><img src="css/load.gif" class="loader" alt="loading"/></div><div id="kg_md_right_footer"></div></div>';

    // split the desktop to sales and rental
    $('#kg_mydesktop').html(html);

    // allocate the dimensions for left and right
    $('#kg_md_left').width((mydesktop_width / 2) - 18);
    $('#kg_md_right').width((mydesktop_width / 2));


    LoadSalesProp(true);
    LoadRentalProp(true);
}

function SetupResidentialPage() {
    mydesktop_width = $('#kg_mydesktop').width();
    mydesktop_height = $('#kg_mydesktop').height();
    var html = '<div id="kg_main_property"></div>';

    // split the desktop to sales and rental
    $('#kg_mydesktop').html(html);

    LoadSalesProp(false);
}

function BuildResidentialPage() {
    // now build the property listing
    if (residentials) {
        // display the first data in the list
        var body_html = "";
        for (var key in residentials) {
            body_html += "<div class='kg_main_property_item'>";
            body_html += "<div class='pi_image'><a href='javascript:SetResidentialIndex(" + key + ");' title='Click for more Details'><img src='" + residentials[key].images[0].img[0].url + "' alt='' /></a></div>";
            //            body_html += "<a href='javascript:LoadSalesProperties(" + key + ");'><div class='md_sales_item'>";
            //            body_html += salesProp[key].suburb;
            body_html += "<div class='pmd_garage'> " + residentials[key].features[0].garages + "</div>";
            body_html += "<div class='pmd_bathroom'> " + residentials[key].features[0].bathrooms + "</div>";
            body_html += "<div class='pmd_bedroom'> " + residentials[key].features[0].bedrooms + "</div>";
            body_html += "<div class='pmd_price'> " + residentials[key].priceView + "&nbsp;</div>";
            body_html += "<div class='div_reset'></div>";
            body_html += "<div class='div_reset'></div><div class='pi_details'>";
            body_html += "<div class='pi_address'> " + residentials[key].address[0].streetNumber + "&nbsp;" + residentials[key].address[0].street + "</div>";
            body_html += "<div class='pi_address2'> " + residentials[key].address[0].suburb[0].suburb_Text + "&nbsp;" + residentials[key].address[0].state + "&nbsp;" + residentials[key].address[0].postcode + "</div>";
            body_html += "<div class='pi_more'><a href='javascript:SetResidentialIndex(" + key + ");'>Click for more Details</a></div>";
            //  ,body_html += "<div class='md_category'></div>";
            //            body_html += "<div class='md_price'> " + salesProp[key].price + "</div>";
            //            body_html += "<div class='md_headline'>" + salesProp[key].headline + "</div></div></a>";
            body_html += "</div></div>";
        }

        $('#kg_main_property').html(body_html);
    } // if (salesProp)
}

function BuildRentalPage() {
    // now build the property listing
    if (rentals) {
        // display the first data in the list
        var body_html = "";
        for (var key in rentals) {
            body_html += "<div class='kg_main_property_item'>";
            body_html += "<div class='pi_image'><a href='javascript:SetRentallIndex(" + key + ");' title='Click for more Details'><img src='" + rentals[key].images[0].img[0].url + "' alt='' /></a></div>";
            //            body_html += "<a href='javascript:LoadSalesProperties(" + key + ");'><div class='md_sales_item'>";
            //            body_html += salesProp[key].suburb;
            body_html += "<div class='pmd_garage'> " + rentals[key].features[0].garages + "</div>";
            body_html += "<div class='pmd_bathroom'> " + rentals[key].features[0].bathrooms + "</div>";
            body_html += "<div class='pmd_bedroom'> " + rentals[key].features[0].bedrooms + "</div>";
            body_html += "<div class='pmd_price'> " + "$" + rentals[key].rent[0].rent_Text + " pw&nbsp;" + "</div>";
            body_html += "<div class='div_reset'></div>";
            body_html += "<div class='div_reset'></div><div class='pi_details'>";
            body_html += "<div class='pi_address'> " + rentals[key].address[0].streetNumber + "&nbsp;" + rentals[key].address[0].street + "</div>";
            body_html += "<div class='pi_address2'> " + rentals[key].address[0].suburb[0].suburb_Text + "&nbsp;" + rentals[key].address[0].state + "&nbsp;" + rentals[key].address[0].postcode + "</div>";
            body_html += "<div class='pi_more'><a href='javascript:SetRentallIndex(" + key + ");'>Click for more Details</a></div>";
            //  ,body_html += "<div class='md_category'></div>";
            //            body_html += "<div class='md_price'> " + salesProp[key].price + "</div>";
            //            body_html += "<div class='md_headline'>" + salesProp[key].headline + "</div></div></a>";
            body_html += "</div></div>";
        }

        $('#kg_main_property').html(body_html);
    } // if (salesProp)
}

function SetResidentialIndex(key) {
    salesIndex = key;
    DisplaySalesPropertyDetails();
}

function SetRentallIndex(key) {
    rentalIndex = key;
    DisplayRentalPropertyDetails();
}

function SetupRentalPage() {
    mydesktop_width = $('#kg_mydesktop').width();
    mydesktop_height = $('#kg_mydesktop').height();
    var html = '<div id="kg_main_property"></div>';

    // split the desktop to sales and rental
    $('#kg_mydesktop').html(html);

    LoadRentalProp(false);
}

function LoadSalesProp(loadItem) {
    $.ajax({
        type: "GET",
        url: "http://kineticglobe.com/AjaxServer.ashx?type=GETMYDESKTOP&list=residential&mydesktopid=" + MYDESKTOPID + "&callback=?",
        dataType: 'json',
        success: function (data) {
            residentials = eval(data.propertyList[0].residential);
            for (var key in residentials) {
                salesProp.push({
                    uniqueID: residentials[key].uniqueID
                    , suburb: residentials[key].address[0].suburb[0].suburb_Text
                    , headline: residentials[key].headline
                    , description: residentials[key].description
                    , image1: residentials[key].images[0].img[0].url
                    , price: residentials[key].priceView
                    , category: residentials[key].category[0].name
                    , bedrooms: residentials[key].features[0].bedrooms
                    , bathrooms: residentials[key].features[0].bathrooms
                    , garages: residentials[key].features[0].garages
                });
            }

            if (loadItem)
                LoadSalesProperties(salesIndex);
            else
                BuildResidentialPage();

        },
        error: function () {
            alert("failed");
        }
    });
}

function LoadRentalProp(loadItem) {
    $.ajax({
        type: "GET",
        url: "http://kineticglobe.com/AjaxServer.ashx?type=GETMYDESKTOP&list=rental&mydesktopid=" + MYDESKTOPID + "&callback=?",
        dataType: 'json',
        success: function (data) {
            rentals = eval(data.propertyList[0].rental);
            for (var key in rentals) {
                rentalProp.push({
                    uniqueID: rentals[key].uniqueID
                    , suburb: rentals[key].address[0].suburb[0].suburb_Text
                    , headline: rentals[key].headline
                    , description: rentals[key].description
                    , image1: rentals[key].images[0].img[0].url
                    , rent: "$" + rentals[key].rent[0].rent_Text + " pw&nbsp;"
                    , category: rentals[key].category[0].name
                    , bedrooms: rentals[key].features[0].bedrooms
                    , bathrooms: rentals[key].features[0].bathrooms
                    , garages: rentals[key].features[0].garages
                });
            }

            if (loadItem)
                LoadRentalProperties(rentalIndex);
            else
                BuildRentalPage();

        },
        error: function () {
            alert("failed");
        }
    });
}

function LoadSalesProperties(index) {
    salesIndex = index;
    //$('#kg_md_left_head').html('<div><a id="btn_sales" href="#">Sales</a></div>');
    $('#kg_md_left_body').html("Sales Properties Here");

    if (salesProp) {
        // display the first data in the list
        var body_html = "<div class='md_salesheader'>";
        body_html += salesProp[index].suburb;
        body_html += "<div class='md_garage'> " + salesProp[index].garages + "</div>";
        body_html += "<div class='md_bathroom'> " + salesProp[index].bathrooms + "</div>";
        body_html += "<div class='md_bedroom'> " + salesProp[index].bedrooms + "</div>";
        //body_html += "<div class='md_category'></div>";
        body_html += "<div class='md_price'> " + salesProp[index].price + "&nbsp;</div>";
        body_html += "</div>";
        body_html += "<div class='md_mainimage'><a href='javascript:DisplaySalesPropertyDetails();'><img src='" + salesProp[index].image1 + "' alt='' title='Click for more Details' /></a></div>";
        body_html += "<div class='md_headline'>" + salesProp[index].headline + "</div>";
        body_html += "<div class='md_description'><span class='ellipsis_text'>" + salesProp[index].description + "</span></div>";
        body_html += "<div class='md_more'><a href='javascript:DisplaySalesPropertyDetails();'>Click for more Details</a></div>";
        $('#kg_md_left_body').html(body_html);

        // configure the footer
        var footer_html = "";
        if (!salesListVisible) {
            if (salesIndex > 0)
                footer_html += "<div style='float:left;display:block;margin-right:5px;'><a href='javascript:LoadSalesProperties(--salesIndex);'>< Prev</a> | </div>";
            if (salesIndex < salesProp.length - 1)
                footer_html += "<div style='float:left;display:block;margin-right:5px;'><a href='javascript:LoadSalesProperties(++salesIndex);'>Next ></a></div>";
            footer_html += "<div style='float:right;display:block;'><a href='javascript:ViewSalesList();'>View full SALES listing -></a></div>";
        }
        $('#kg_md_left_footer').html(footer_html);

        // apply any global config
        $('.md_description').ThreeDots({ max_rows: 7 });
    } // if (salesProp) {
}

function DisplaySalesPropertyDetails() {
    var html = "<div class='md_full_details'>";
    var headline = "";
    html += "<a href='#'><div class='md_imagegallery'>";
    var imageCount = 0;
    // load the images
    var photosList = eval(residentials[salesIndex].images[0].img);
    if (photosList) {
        for (var key in photosList) {
            if (photosList[key].url != null) {
                html += "<img src='" + photosList[key].url + "' title='Click to manually scroll through images.' />";
                imageCount++;
            }
        } // for (var key in feeds)   
    } // if (photosList)

    html += "</div></a><div class='div_reset'></div><div class='md_spec_outer'>";

    // specs
    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>";
    html += "<div class='md_garage'> " + residentials[salesIndex].features[0].garages + "</div>";
    html += "<div class='md_bathroom'> " + residentials[salesIndex].features[0].bathrooms + "</div>";
    html += "<div class='md_bedroom'> " + residentials[salesIndex].features[0].bedrooms + "</div>";
    html += "<div class='md_price'>" + residentials[salesIndex].priceView + "&nbsp;</div><div class='div_reset'></div></div>";

    // get the status
    var status = "For Sale";
    if (residentials[salesIndex].underOffer[0] != null) {
        if (residentials[salesIndex].underOffer[0].value == "yes") {
            status = "Under Contract";
        }
    }

    html += "<div class='md_split'>Category: <span>" + residentials[salesIndex].category[0].name + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>Location: <span>" + residentials[salesIndex].address[0].suburb[0].suburb_Text + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>State: <span>" + residentials[salesIndex].address[0].state + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>Status: <span>" + status + "</span></div><div class='div_reset'></div>";
    if (residentials[salesIndex].landDetails != null)
        html += "<div class='md_split'>Land Area: <span>" + CleanUpLandArea(residentials[salesIndex].landDetails[0].area[0].unit, residentials[salesIndex].landDetails[0].area[0].area_Text) + "</span></div><div class='div_reset'></div>";

    html += "</div><div class='div_reset'></div>";

    // agent
    var email = residentials[salesIndex].listingAgent[0].email;
    var property = "Property ID : " + residentials[salesIndex].uniqueID + "          ";
    property += "Address : " + residentials[salesIndex].address[0].streetNumber + " ";
    property += residentials[salesIndex].address[0].street + " ";
    property += residentials[salesIndex].address[0].suburb[0].suburb_Text;

    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>Agent Details</div><div class='div_reset'></div>";

    html += "<div class='md_split'>Name: <span>" + residentials[salesIndex].listingAgent[0].name + "</span></div><div class='div_reset'></div>";
    for (var key in residentials[salesIndex].listingAgent[0].telephone) {
        var telType = residentials[salesIndex].listingAgent[0].telephone[key].type;
        switch (telType) {
            case "mobile":
                html += "<div class='md_split'>Mobile: <span>" + residentials[salesIndex].listingAgent[0].telephone[key].telephone_Text + "</span></div><div class='div_reset'></div>";
                break;
            default:
                html += "<div class='md_split'>Telephone: <span>" + residentials[salesIndex].listingAgent[0].telephone[key].telephone_Text + "</span></div><div class='div_reset'></div>";
                break;
        }
    }
    html += "<div class='md_split'><br/><a href='javascript:DisplayEnquiryForm(\"" + email + "\",\"" + property + "\");' alt='' title=''>Email Agent your enquiry</a></div><div class='div_reset'></div>";

    html += "</div><div class='div_reset'></div>";


    // inspection time
    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>Inspection Times</div><div class='div_reset'></div>";
    try {
        var inspectionTimes = eval(residentials[salesIndex].inspectionTimes[0].inspection);
        if (inspectionTimes) {
            for (var key in inspectionTimes) {
                if (inspectionTimes[key]) {
                    var inspectionTime = inspectionTimes[key].inspection_Text;
                    if (inspectionTime != "null")
                        html += "<div class='md_split'>" + inspectionTime + "</div><div class='div_reset'></div>";
                }
            }
        }
    } catch (err) {
    }


    html += "</div></div><div class='div_reset'></div>";

    // now the details at the bottom
    // html += "<div class='md_bottom'><div class='md_headline'>" + residentials[salesIndex].headline + "</div><br/>";
    html += "<div class='md_bottom'><div class='md_description'><span class='ellipsis_text'>" + residentials[salesIndex].description + "</span></div></div>";

    html += "</div>";

    DisplayPopup(html,
    residentials[salesIndex].headline,
    true,
    true);

    if (imageCount > 1) {
        $('.md_imagegallery').cycle({
            fx: 'fade',
            next: $('.md_imagegallery img')
        });
    }
    else {
        //$('.md_loading_img').html("");
    }
}

function DisplayEnquiryForm(email, prop) {
    $('.md_full_details').html("<iframe src='http://raywhiteglenmore.com/forms/rayw_enquiry.php?sfm_from_iframe=1&prop=" + prop + "&to=" + email + "' frameborder='0' width='100%' height='504' allowtransparency='true'></iframe>");
}

function DisplayRentalPropertyDetails() {
    var html = "<div class='md_full_details'>";
    //html += "<div class='md_loading_img'>Loading Image Please Wait...</div>";
    html += "<a href='#'><div class='md_imagegallery'>";
    var imageCount = 0;
    // load the images
    var photosList = eval(rentals[rentalIndex].images[0].img);
    if (photosList) {
        for (var key in photosList) {
            if (photosList[key].url != null) {
                html += "<img src='" + photosList[key].url + "' title='Click to manually scroll through images.' />";
                imageCount++;
            }
        } // for (var key in feeds)

        if (imageCount == 1) {
            for (var key in photosList) {
                if (photosList[key].url != null) {
                    html += "<img src='" + photosList[key].url + "' title='Click to manually scroll through images.' />";
                    imageCount++;
                }
            } // for (var key in feeds)
        }
    } // if (photosList)

    html += "</div></a><div class='div_reset'></div><div class='md_spec_outer'>";

    // specs
    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>";
    html += "<div class='md_garage'> " + rentals[rentalIndex].features[0].garages + "</div>";
    html += "<div class='md_bathroom'> " + rentals[rentalIndex].features[0].bathrooms + "</div>";
    html += "<div class='md_bedroom'> " + rentals[rentalIndex].features[0].bedrooms + "</div>";
    html += "<div class='md_price'>$" + rentals[rentalIndex].rent[0].rent_Text + " pw&nbsp;</div><div class='div_reset'></div></div>";

    html += "<div class='md_split'>Category: <span>" + rentals[rentalIndex].category[0].name + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>Location: <span>" + rentals[rentalIndex].address[0].suburb[0].suburb_Text + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>State: <span>" + rentals[rentalIndex].address[0].state + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>Status: <span>" + rentals[rentalIndex].status + "</span></div><div class='div_reset'></div>";
    html += "<div class='md_split'>&nbsp;</div><div class='div_reset'></div>";

    html += "</div><div class='div_reset'></div>";

    // agent
    var email = rentals[rentalIndex].listingAgent[0].email;
    var property = "Property ID : " + rentals[rentalIndex].uniqueID + "          ";
    property += "Address : " + rentals[rentalIndex].address[0].streetNumber + " ";
    property += rentals[rentalIndex].address[0].street + " ";
    property += rentals[rentalIndex].address[0].suburb[0].suburb_Text;


    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>Agent Details</div><div class='div_reset'></div>";

    html += "<div class='md_split'>Name: <span>" + rentals[rentalIndex].listingAgent[0].name + "</span></div><div class='div_reset'></div>";
    for (var key in rentals[rentalIndex].listingAgent[0].telephone) {
        var telType = rentals[rentalIndex].listingAgent[0].telephone[key].type;
        switch (telType) {
            case "mobile":
                html += "<div class='md_split'>Mobile: <span>" + rentals[rentalIndex].listingAgent[0].telephone[key].telephone_Text + "</span></div><div class='div_reset'></div>";
                break;
            default:
                html += "<div class='md_split'>Telephone: <span>" + rentals[rentalIndex].listingAgent[0].telephone[key].telephone_Text + "</span></div><div class='div_reset'></div>";
                break;
        }
    }
    html += "<div class='md_split'><br/><a href='javascript:DisplayEnquiryForm(\"" + email + "\",\"" + property + "\");' alt='' title=''>Email Agent your enquiry</a></div><div class='div_reset'></div>";

    html += "</div><div class='div_reset'></div>";


    // inspection time
    html += "<div class='md_specs'>";
    html += "<div class='md_specs_head'>Open for Inspection</div><div class='div_reset'></div>";
    for (var key in rentals[rentalIndex].inspectionTimes) {
        if (rentals[rentalIndex].inspectionTimes[key].inspection) {
            var inspectionTime = rentals[rentalIndex].inspectionTimes[key].inspection;
            if (inspectionTime != "null")
                html += "<div class='md_split'>" + rentals[rentalIndex].inspectionTimes[key].inspection + "</div><div class='div_reset'></div>";
        }
    }
    html += "</div></div><div class='div_reset'></div>";

    // now the details at the bottom
    // html += "<div class='md_bottom'><div class='md_headline'>" + rentals[rentalIndex].headline + "</div><br/>";
    html += "<div class='md_bottom'><div class='md_description'><span class='ellipsis_text'>" + rentals[rentalIndex].description + "</span></div></div>";

    html += "</div>";
    DisplayPopup(html,
    rentals[rentalIndex].headline,
    true,
    true);

    if (imageCount > 1) {
        $('.md_imagegallery').cycle({
            fx: 'fade',
            next: $('.md_imagegallery img')
        });
    }
    else {
        // $('.md_loading_img').html("");
    }
}

function CleanUpLandArea(unit, value) {
    var cleanVal = value;
    switch (unit) {
        case "squareMeter":
            cleanVal += " sqm";
            break;
        default:
            cleanVal += " " + unit;
            break;
    }

    return cleanVal;
}

function DisplayPopup(msg, title, escClose, modalClose) {
    var cwHtml = "<div id='kgpOuter'><div id='kgpView'><div id='kgpInner'><div id='kgpTitle'></div><div style='padding: 5px 5px 5px 5px;'><div id='kgpContent'></div></div></div></div></div>";
    $('#kg_mydesktop_popup').html(cwHtml);
    $('#kgpTitle').html(title + "<a class='bClose'>X</a>");
    $('#kgpContent').html(msg);
    $('#kg_mydesktop_popup').bPopup({ amsl: 50, fadeSpeed: 1, escClose: escClose, modalClose: modalClose, zIndex: 200 });

}

function GetCategoryImage(category) {
    switch (category) {
        default: return "head_bg.jpg";
    }
}

function ViewSalesList() {
    // basically display this list on the rhs
    var body_html = "No Properties for Sale to Display";
    salesListVisible = true;

    if (salesProp) {
        // display the first data in the list
        body_html = "<div class='md_sales_list'>";
        for (var key in salesProp) {
            body_html += "<a href='javascript:LoadSalesProperties(" + key + ");'><div class='md_sales_item'>";
            body_html += salesProp[key].suburb;
            body_html += "<div class='md_garage'> " + salesProp[key].garages + "</div>";
            body_html += "<div class='md_bathroom'> " + salesProp[key].bathrooms + "</div>";
            body_html += "<div class='md_bedroom'> " + salesProp[key].bedrooms + "</div>";
            //body_html += "<div class='md_category'></div>";
            body_html += "<div class='md_price'> " + salesProp[key].price + "&nbsp;</div>";
            //            body_html += "<div class='md_mainimage'><img src='" + salesProp[key].image1 + "' alt='' /></div>";
            body_html += "<div class='md_headline'>" + salesProp[key].headline + "</div></div></a>";
            //            body_html += "<div class='md_description'><span class='ellipsis_text'>" + salesProp[key].description + "</span></div>";
        }
        body_html += "</div>";
    } // if (salesProp) {

    $('#kg_md_right_body').html(body_html);
    $('#kg_md_right').height($('#kg_md_right').height() + listHeight);
    $('#kg_md_right_body').height($('#kg_md_right_body').height() + listBodyHeight);
    $('#kg_md_right_head').html("PROPERTIES FOR SALE");
    $('#kg_md_right_head').show();
    $('#kg_md_right_footer').html("<a href='javascript:CloseList();'>Close List View</a>");
    $('#kg_md_left_footer').html("");
    $('#btn_sales_list').hide();
}

function CloseList() {
    // restore size of this column
    if (rentListVisible) {
        $('#kg_md_left').height($('#kg_md_left').height() - listHeight);
        $('#kg_md_left_body').height($('#kg_md_left_body').height() - listBodyHeight);
        $('#kg_md_left_head').hide("fast");
        rentListVisible = false;
    }

    // restore size of this column
    if (salesListVisible) {
        $('#kg_md_right').height($('#kg_md_right').height() - listHeight);
        $('#kg_md_right_body').height($('#kg_md_right_body').height() - listBodyHeight);
        $('#kg_md_right_head').hide("fast");
        salesListVisible = false;
    }

    LoadRentalProperties(rentalIndex);
    LoadSalesProperties(salesIndex);
}

function LoadRentalProperties(index) {
    rentalIndex = index;

    //$('#kg_md_right_head').html('<div><a id="btn_rentals" href="#">Rental</a></div>');
    $('#kg_md_right_body').html("Rental Properties Here");

    if (rentalProp) {
        // display the first data in the list
        var body_html = "<div class='md_rentalheader'>";
        body_html += rentalProp[index].suburb;
        body_html += "<div class='md_garage'> " + rentalProp[index].garages + "</div>";
        body_html += "<div class='md_bathroom'> " + rentalProp[index].bathrooms + "</div>";
        body_html += "<div class='md_bedroom'> " + rentalProp[index].bedrooms + "</div>";
        //body_html += "<div class='md_category'></div>";
        body_html += "<div class='md_price'> " + rentalProp[index].rent + "&nbsp;</div>";
        body_html += "</div>";
        body_html += "<div class='md_mainimage'><a href='javascript:DisplayRentalPropertyDetails();'><img src='" + rentalProp[index].image1 + "' alt='' title='Click for more Details' /></a></div>";
        body_html += "<div class='md_headline'>" + rentalProp[index].headline + "</div>";
        body_html += "<div class='md_description2'><span class='ellipsis_text'>" + rentalProp[index].description + "</span></div>";
        body_html += "<div class='md_more'><a href='javascript:DisplayRentalPropertyDetails();'>Click for more Details</a></div>";

        // configure the footer
        var footer_html = "";
        if (!rentListVisible) {
            footer_html += "<div id='btn_sales_list' style='float:left;display:block;'><a href='javascript:ViewRentList();'><- View full RENTAL listing</a></div>";

            if (rentalIndex < rentalProp.length - 1)
                footer_html += "<div style='float:right;display:block;margin-right:5px;'><a href='javascript:LoadRentalProperties(++rentalIndex);'>Next ></a></div>";
            if (rentalIndex > 0)
                footer_html += "<div style='float:right;display:block;margin-right:5px;'><a href='javascript:LoadRentalProperties(--rentalIndex);'>< Prev</a> | </div>";
        }

        $('#kg_md_right_body').html(body_html);

        // configure the footer
        $('#kg_md_right_footer').html(footer_html);

        $('.md_description2').ThreeDots({ max_rows: 7 });

    } // if (salesProp) {
}

function ViewRentList() {
    // basically display this list on the rhs
    var body_html = "No Properties for Rent to Display";
    rentListVisible = true;

    if (salesProp) {
        // display the first data in the list
        body_html = "<div class='md_rent_list'>";
        for (var key in rentalProp) {
            body_html += "<a href='javascript:LoadRentalProperties(" + key + ");'><div class='md_rent_item'>";
            body_html += rentalProp[key].suburb;
            body_html += "<div class='md_garage'> " + rentalProp[key].garages + "</div>";
            body_html += "<div class='md_bathroom'> " + rentalProp[key].bathrooms + "</div>";
            body_html += "<div class='md_bedroom'> " + rentalProp[key].bedrooms + "</div>";
            //            body_html += "<div class='md_category'></div>";
            body_html += "<div class='md_price'> " + rentalProp[key].rent + "</div>";
            //            body_html += "<div class='md_mainimage'><img src='" + salesProp[key].image1 + "' alt='' /></div>";
            body_html += "<div class='md_headline'>" + rentalProp[key].headline + "</div></div></a>";
            //            body_html += "<div class='md_description'><span class='ellipsis_text'>" + salesProp[key].description + "</span></div>";
        }
        body_html += "</div>";
    } // if (salesProp) {

    $('#kg_md_left_body').html(body_html);
    $('#kg_md_left').height($('#kg_md_left').height() + listHeight);
    $('#kg_md_left_body').height($('#kg_md_left_body').height() + listBodyHeight);
    $('#kg_md_left_head').html("Properties For Rent");
    $('#kg_md_left_head').show();
    $('#kg_md_left_footer').html("<a href='javascript:CloseList();'>Close List View</a>");
    $('#kg_md_right_footer').html("");
    $('#btn_sales_list').hide();
}

/////// EXTERNAL SCRIPTS ///////////////
/*
jQuery.ThreeDots.min

Author Jeremy Horn
Version 1.0.10
Date: 1/25/2009
More: http://tpgblog.com/ThreeDots/
compiled by http://yui.2clics.net/
*/

(function (e) { e.fn.ThreeDots = function (h) { var g = this; if ((typeof h == "object") || (h == undefined)) { e.fn.ThreeDots.the_selected = this; var g = e.fn.ThreeDots.update(h) } return g }; e.fn.ThreeDots.update = function (u) { var k, t = null; var m, j, s, q, o; var l, i; var r, h, n; if ((typeof u == "object") || (u == undefined)) { e.fn.ThreeDots.c_settings = e.extend({}, e.fn.ThreeDots.settings, u); var p = e.fn.ThreeDots.c_settings.max_rows; if (p < 1) { return e.fn.ThreeDots.the_selected } var g = false; jQuery.each(e.fn.ThreeDots.c_settings.valid_delimiters, function (v, w) { if (((new String(w)).length == 1)) { g = true } }); if (g == false) { return e.fn.ThreeDots.the_selected } e.fn.ThreeDots.the_selected.each(function () { k = e(this); if (e(k).children("." + e.fn.ThreeDots.c_settings.text_span_class).length == 0) { return true } l = e(k).children("." + e.fn.ThreeDots.c_settings.text_span_class).get(0); var y = a(k, true); var x = e(l).text(); d(k, l, y); var v = e(l).text(); if ((h = e(k).attr("threedots")) != undefined) { e(l).text(h); e(k).children("." + e.fn.ThreeDots.c_settings.e_span_class).remove() } r = e(l).text(); if (r.length <= 0) { r = "" } e(k).attr("threedots", x); if (a(k, y) > p) { curr_ellipsis = e(k).append('<span style="white-space:nowrap" class="' + e.fn.ThreeDots.c_settings.e_span_class + '">' + e.fn.ThreeDots.c_settings.ellipsis_string + "</span>"); while (a(k, y) > p) { i = b(e(l).text()); e(l).text(i.updated_string); t = i.word; n = i.del; if (n == null) { break } } if (t != null) { var w = c(k, y); if ((a(k, y) <= p - 1) || (w) || (!e.fn.ThreeDots.c_settings.whole_word)) { r = e(l).text(); if (i.del != null) { e(l).text(r + n) } if (a(k, y) > p) { e(l).text(r) } else { e(l).text(e(l).text() + t); if ((a(k, y) > p + 1) || (!e.fn.ThreeDots.c_settings.whole_word) || (v == t) || w) { while ((a(k, y) > p)) { if (e(l).text().length > 0) { e(l).text(e(l).text().substr(0, e(l).text().length - 1)) } else { break } } } } } } } if (x == e(e(k).children("." + e.fn.ThreeDots.c_settings.text_span_class).get(0)).text()) { e(k).children("." + e.fn.ThreeDots.c_settings.e_span_class).remove() } else { if ((e(k).children("." + e.fn.ThreeDots.c_settings.e_span_class)).length > 0) { if (e.fn.ThreeDots.c_settings.alt_text_t) { e(k).children("." + e.fn.ThreeDots.c_settings.text_span_class).attr("title", x) } if (e.fn.ThreeDots.c_settings.alt_text_e) { e(k).children("." + e.fn.ThreeDots.c_settings.e_span_class).attr("title", x) } } } }) } return e.fn.ThreeDots.the_selected }; e.fn.ThreeDots.settings = { valid_delimiters: [" ", ",", "."], ellipsis_string: "...", max_rows: 2, text_span_class: "ellipsis_text", e_span_class: "threedots_ellipsis", whole_word: true, allow_dangle: false, alt_text_e: false, alt_text_t: false }; function c(k, h) { if (e.fn.ThreeDots.c_settings.allow_dangle == true) { return false } var l = e(k).children("." + e.fn.ThreeDots.c_settings.e_span_class).get(0); var g = e(l).css("display"); var i = a(k, h); e(l).css("display", "none"); var j = a(k, h); e(l).css("display", g); if (i > j) { return true } else { return false } } function a(i, j) { var g = typeof j; if ((g == "object") || (g == undefined)) { return e(i).height() / j.lh } else { if (g == "boolean") { var h = f(e(i)); return { lh: h} } } } function b(k) { var j; var i = e.fn.ThreeDots.c_settings.valid_delimiters; k = jQuery.trim(k); var g = -1; var h = null; var l = null; jQuery.each(i, function (m, o) { if (((new String(o)).length != 1) || (o == null)) { return false } var n = k.lastIndexOf(o); if (n != -1) { if (n > g) { g = n; h = k.substring(g + 1); l = o } } }); if (g > 0) { return { updated_string: jQuery.trim(k.substring(0, g)), word: h, del: l} } else { return { updated_string: "", word: jQuery.trim(k), del: null} } } function f(h) { e(h).append("<div id='temp_ellipsis_div' style='position:absolute; visibility:hidden'>H</div>"); var g = e("#temp_ellipsis_div").height(); e("#temp_ellipsis_div").remove(); return g } function d(k, l, m) { var q = e(l).text(); var i = q; var o = e.fn.ThreeDots.c_settings.max_rows; var h, g, n, r, j; var p; if (a(k, m) <= o) { return } else { p = 0; curr_length = i.length; curr_middle = Math.floor((curr_length - p) / 2); h = q.substring(p, p + curr_middle); g = q.substring(p + curr_middle); while (curr_middle != 0) { e(l).text(h); if (a(k, m) <= (o)) { j = Math.floor(g.length / 2); n = g.substring(0, j); p = h.length; i = h + n; curr_length = i.length; e(l).text(i) } else { i = h; curr_length = i.length } curr_middle = Math.floor((curr_length - p) / 2); h = q.substring(0, p + curr_middle); g = q.substring(p + curr_middle) } } } })(jQuery);

/************************************************************************
* @name: bPopup
* @author: (c) Bjoern Klinggaard (http://dinbror.dk/bpopup)
* @version: 0.5.1.min
************************************************************************/
(function (a) { a.fn.bPopup = function (h, j) { function s() { b.css({ left: !o.follow[1] && k ? d : c.scrollLeft() + d, position: "absolute", top: !o.follow[0] && l ? e : c.scrollTop() + e, "z-index": o.zIndex }).appendTo(o.appendTo).hide(1, function () { a.isFunction(o.onOpen) && o.onOpen.call(b); if (o.loadUrl != null) switch (o.contentContainer = o.contentContainer == null ? b : a(o.contentContainer), o.content) { case "iframe": a('<iframe scrolling="no" frameborder="0"></iframe>').attr("src", o.loadUrl).appendTo(o.contentContainer); break; default: o.contentContainer.load(o.loadUrl) } }).fadeIn(o.fadeSpeed, function () { a.isFunction(j) && j() }); t() } function i() { o.modal && a("#bModal").fadeOut(o.fadeSpeed, function () { a("#bModal").remove() }); b.fadeOut(o.fadeSpeed, function () { o.loadUrl != null && o.contentContainer.empty() }); o.scrollBar || a("html").css("overflow", "auto"); a("." + o.closeClass).die("click"); a("#bModal").die("click"); c.unbind("keydown.bPopup"); f.unbind(".bPopup"); b.data("bPopup", null); a.isFunction(o.onClose) && setTimeout(function () { o.onClose.call(b) }, o.fadeSpeed); return !1 } function u() { if (n || v) { var a = [c.height(), c.width()]; return { "background-color": o.modalColor, height: a[0], left: m(), opacity: 0, position: "absolute", top: 0, width: a[1], "z-index": o.zIndex - 1} } else return { "background-color": o.modalColor, height: "100%", left: 0, opacity: 0, position: "fixed", top: 0, width: "100%", "z-index": o.zIndex - 1} } function t() { a("." + o.closeClass).live("click", i); o.modalClose && a("#bModal").live("click", i).css("cursor", "pointer"); (o.follow[0] || o.follow[1]) && f.bind("scroll.bPopup", function () { b.stop().animate({ left: o.follow[1] ? c.scrollLeft() + d : d, top: o.follow[0] ? c.scrollTop() + e : e }, o.followSpeed) }).bind("resize.bPopup", function () { if (o.modal && n) { var a = [c.height(), c.width()]; p.css({ height: a[0], width: a[1], left: m() }) } g = q(b, o.amsl); o.follow[0] && (e = l ? e : c.scrollTop() + g[0]); o.follow[1] && (d = k ? d : c.scrollLeft() + g[1]); b.stop().animate({ left: d, top: e }, o.followSpeed) }); o.escClose && c.bind("keydown.bPopup", function (a) { a.which == 27 && i() }) } function m() { return f.width() < a("body").width() ? 0 : (a("body").width() - f.width()) / 2 } function q(a, b) { var c = (f.height() - a.outerHeight(!0)) / 2 - b, d = (f.width() - a.outerWidth(!0)) / 2 + m(); return [c < 20 ? 20 : c, d] } a.isFunction(h) && (j = h, h = null); o = a.extend({}, a.fn.bPopup.defaults, h); o.scrollBar || a("html").css("overflow", "hidden"); var b = a(this), p = a('<div id="bModal"></div>'), c = a(document), f = a(window), g = q(b, o.amsl), l = o.position[0] != "auto", k = o.position[1] != "auto", e = l ? o.position[0] : g[0], d = k ? o.position[1] : g[1], r = navigator.userAgent.toLowerCase(), v = r.indexOf("iphone") != -1, n = /msie 6/i.test(r) && typeof window.XMLHttpRequest != "object"; this.close = function () { o = b.data("bPopup"); i() }; return this.each(function () { b.data("bPopup") || (o.modal && p.css(u()).appendTo(o.appendTo).animate({ opacity: o.opacity }, o.fadeSpeed), b.data("bPopup", o), s()) }) }; a.fn.bPopup.defaults = { amsl: 50, appendTo: "body", closeClass: "bClose", content: "ajax", contentContainer: null, escClose: !0, fadeSpeed: 250, follow: [!0, !0], followSpeed: 500, loadUrl: null, modal: !0, modalClose: !0, modalColor: "#000", onClose: null, onOpen: null, opacity: 0.7, position: ["auto", "auto"], scrollBar: !0, zIndex: 9999} })(jQuery);

/*!
* jQuery Cycle Lite Plugin
* http://malsup.com/jquery/cycle/lite/
* Copyright (c) 2008 M. Alsup
* Version: 1.0 (06/08/2008)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.3 or later
*/
(function (D) { var A = "Lite-1.0"; D.fn.cycle = function (E) { return this.each(function () { E = E || {}; if (this.cycleTimeout) { clearTimeout(this.cycleTimeout) } this.cycleTimeout = 0; this.cyclePause = 0; var I = D(this); var J = E.slideExpr ? D(E.slideExpr, this) : I.children(); var G = J.get(); if (G.length < 2) { if (window.console && window.console.log) { window.console.log("terminating; too few slides: " + G.length) } return } var H = D.extend({}, D.fn.cycle.defaults, E || {}, D.metadata ? I.metadata() : D.meta ? I.data() : {}); H.before = H.before ? [H.before] : []; H.after = H.after ? [H.after] : []; H.after.unshift(function () { H.busy = 0 }); var F = this.className; H.width = parseInt((F.match(/w:(\d+)/) || [])[1]) || H.width; H.height = parseInt((F.match(/h:(\d+)/) || [])[1]) || H.height; H.timeout = parseInt((F.match(/t:(\d+)/) || [])[1]) || H.timeout; if (I.css("position") == "static") { I.css("position", "relative") } if (H.width) { I.width(H.width) } if (H.height && H.height != "auto") { I.height(H.height) } var K = 0; J.css({ position: "absolute", top: 0, left: 0 }).hide().each(function (M) { D(this).css("z-index", G.length - M) }); D(G[K]).css("opacity", 1).show(); if (D.browser.msie) { G[K].style.removeAttribute("filter") } if (H.fit && H.width) { J.width(H.width) } if (H.fit && H.height && H.height != "auto") { J.height(H.height) } if (H.pause) { I.hover(function () { this.cyclePause = 1 }, function () { this.cyclePause = 0 }) } D.fn.cycle.transitions.fade(I, J, H); J.each(function () { var M = D(this); this.cycleH = (H.fit && H.height) ? H.height : M.height(); this.cycleW = (H.fit && H.width) ? H.width : M.width() }); J.not(":eq(" + K + ")").css({ opacity: 0 }); if (H.cssFirst) { D(J[K]).css(H.cssFirst) } if (H.timeout) { if (H.speed.constructor == String) { H.speed = { slow: 600, fast: 200}[H.speed] || 400 } if (!H.sync) { H.speed = H.speed / 2 } while ((H.timeout - H.speed) < 250) { H.timeout += H.speed } } H.speedIn = H.speed; H.speedOut = H.speed; H.slideCount = G.length; H.currSlide = K; H.nextSlide = 1; var L = J[K]; if (H.before.length) { H.before[0].apply(L, [L, L, H, true]) } if (H.after.length > 1) { H.after[1].apply(L, [L, L, H, true]) } if (H.click && !H.next) { H.next = H.click } if (H.next) { D(H.next).bind("click", function () { return C(G, H, H.rev ? -1 : 1) }) } if (H.prev) { D(H.prev).bind("click", function () { return C(G, H, H.rev ? 1 : -1) }) } if (H.timeout) { this.cycleTimeout = setTimeout(function () { B(G, H, 0, !H.rev) }, H.timeout + (H.delay || 0)) } }) }; function B(J, E, I, K) { if (E.busy) { return } var H = J[0].parentNode, M = J[E.currSlide], L = J[E.nextSlide]; if (H.cycleTimeout === 0 && !I) { return } if (I || !H.cyclePause) { if (E.before.length) { D.each(E.before, function (N, O) { O.apply(L, [M, L, E, K]) }) } var F = function () { if (D.browser.msie) { this.style.removeAttribute("filter") } D.each(E.after, function (N, O) { O.apply(L, [M, L, E, K]) }) }; if (E.nextSlide != E.currSlide) { E.busy = 1; D.fn.cycle.custom(M, L, E, F) } var G = (E.nextSlide + 1) == J.length; E.nextSlide = G ? 0 : E.nextSlide + 1; E.currSlide = G ? J.length - 1 : E.nextSlide - 1 } if (E.timeout) { H.cycleTimeout = setTimeout(function () { B(J, E, 0, !E.rev) }, E.timeout) } } function C(E, F, I) { var H = E[0].parentNode, G = H.cycleTimeout; if (G) { clearTimeout(G); H.cycleTimeout = 0 } F.nextSlide = F.currSlide + I; if (F.nextSlide < 0) { F.nextSlide = E.length - 1 } else { if (F.nextSlide >= E.length) { F.nextSlide = 0 } } B(E, F, 1, I >= 0); return false } D.fn.cycle.custom = function (K, H, I, E) { var J = D(K), G = D(H); G.css({ opacity: 0 }); var F = function () { G.animate({ opacity: 1 }, I.speedIn, I.easeIn, E) }; J.animate({ opacity: 0 }, I.speedOut, I.easeOut, function () { J.css({ display: "none" }); if (!I.sync) { F() } }); if (I.sync) { F() } }; D.fn.cycle.transitions = { fade: function (F, G, E) { G.not(":eq(0)").css("opacity", 0); E.before.push(function () { D(this).show() }) } }; D.fn.cycle.ver = function () { return A }; D.fn.cycle.defaults = { timeout: 4000, speed: 1000, next: null, prev: null, before: null, after: null, height: "auto", sync: 1, fit: 0, pause: 0, delay: 0, slideExpr: null} })(jQuery)