var _listings;

function load_xml() {
    //alert('load_xml');
    var xhrListing = new XMLHttpRequest();
    var url = '/Public/Listing/GetNewToMarketListings.aspx';
    xhrListing.open("GET", url, true);

    var me = this;
    xhrListing.onreadystatechange = function() {
        if (xhrListing.readyState != 4 || xhrListing.status != 200) { return; }
        try {
            var resp = eval("(" + xhrListing.responseText + ")");
            _listings = resp.listing;
            $("#mycarousel_table").show();
            init_jcarousel(resp.count);
        } catch (err) {
            if (typeof (console) != 'undefined')
                console.error('Error: %s', err.message);
        }
    }

    xhrListing.send(null);
}

function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        //carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        //carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });

    $("#details").hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });

    // buttons
    $(".jcarousel-prev-horizontal").hover(function() {
        this.src = this.src.replace("_off", "_on");
    }, function() {
        this.src = this.src.replace("_on", "_off");
    });

    carousel.startAutoOrig = carousel.startAuto;
    carousel.startAuto = function(secs) {
        if (!carousel.paused)
            carousel.startAutoOrig(secs);
    } 
    
        carousel.paused = false;
        // Click event for playback toggle button, conditionally calls play/pause
        $('#details').click(function() {
            if (carousel.paused) {
                carousel.paused = false;
                carousel.startAuto();
            } else {
                carousel.startAuto();
                carousel.paused = true;
                carousel.stopAuto();
            }
        });
};

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, _listings.length);
    //alert(idx);
    carousel.add(i, mycarousel_getItemHTML(_listings[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
};

function mycarousel_getItemHTML(item) {
    //id,listingid,listingtypeid,thumbpicurl,city,state,bedrooms,bathstotal,price,acres,propertyurl
    if (document.images) {
        preload_image = new Image();
        preload_image.src = item.imagefilename;
    }
    var line_three_val = "";
    if (item.listingtypeid == "3") {
        line_three_val = item.acreage //lnd
    } else {
        line_three_val = item.beds + ", " + item.baths; //res, com, mul
    }
    var city_state = item.city;
    if (item.city != "" && item.state != "") {
        city_state = city_state + ", ";
    }
    city_state = city_state + item.state;
    var city_state_trimmed = city_state.trimToPx(138);

    var html_string = "<li id='" + item.id + "' onclick='open_detail(" + item.listingid + ", \"" + item.listingurl + "\");' style='cursor:pointer;'>" +
					"<img class='property_photo' src='" + item.imagefilename + "' width='96' height='72' />" +
					"<br /><div style='padding-top:4px;'><div style='font-size:11px; width: 95px; white-space:nowrap; overflow:hidden;'>" + item.price + "</div>" +
					"<div title='" + city_state + "' style='font-size:9px;width:95px;overflow:hidden;white-space:nowrap;'>" + city_state_trimmed + "</div>" +
					"<div style='font-size:9px; width: 95px; white-space:nowrap; overflow:hidden;'>" + line_three_val + "</div>" +
					"</div></li>";
    return html_string;
};

function init_jcarousel(rc) {
    var randomnumber = Math.floor(Math.random() * (rc + 1))
    jQuery('#mycarousel').jcarousel({
        auto: 5,
        wrap: 'circular',
        visible: 5,
        scroll: 5,
        start: randomnumber,
        initCallback: mycarousel_initCallback,
        buttonPrevHTML: '<img class=\'prev_button\' src=\'http://images.fnistools.com/images/common/newtomarket/prev_off.png\' onmouseover=\'this.src="http://images.fnistools.com/images/common/newtomarket/prev_on.png"\' onmouseout=\'this.src="http://images.fnistools.com/images/common/newtomarket/prev_off.png"\' />',
        buttonNextHTML: '<img class=\'next_button\' src=\'http://images.fnistools.com/images/common/newtomarket/next_off.png\' onmouseover=\'this.src="http://images.fnistools.com/images/common/newtomarket/next_on.png"\' onmouseout=\'this.src="http://images.fnistools.com/images/common/newtomarket/next_off.png"\' />',
        itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
        itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback }
    });
    // carousel.startAuto(5);

    $("#loading").hide();
}

function open_detail(listingid, listingurl) {
    var root = "";
    if (window.location.hostname.indexOf("-dev") != -1) {
        root = "/public"; 
    }
    var s_url = root + listingurl + '/popup?Ref=hp_NewToMarket';
    window.open(s_url, listingid, "width=820, height=650, location=1, scrollbars=1");
}

String.prototype.visualLength = function() {
    var ruler = g("ruler");
    ruler.innerHTML = this;
    return ruler.offsetWidth;
}

function g(id) {
    return document.getElementById(id);
}

String.prototype.trimToPx = function(length) {
    var tmp = this;
    var trimmed = this;
    if (tmp.visualLength() > length) {
        trimmed += "...";
        while (trimmed.visualLength() > length) {
            tmp = tmp.substring(0, tmp.length - 2);
            trimmed = tmp + "...";
        }
    }

    return trimmed;
}