if (typeof Widget == 'undefined') { var Widget = {}; }

Widget.JumpSearchListingCarousel = function (carouselOptions) {
    var _listings;
    var carousel_addToUrl = "";
    var carouselContainer = $('#' + carouselOptions.id).parent();
    var _brokerOfficeUrl = carouselOptions.brokerOfficeUrl;
 
    carouselContainer.prepend('<div id="' + carouselOptions.loadingElementId + '"><img src="' + carouselOptions.loadingImageUrl + '" border="0"></div>');
 
    if (!$('#ruler').length) {
        carouselContainer.after('<span id="ruler" style="display: none"></span>');
    }
    carouselContainer.after('<div id="' + carouselOptions.id + '-image-proxy" style="position:absolute;"></div>');
    
    
    var x = document.createElement("div");
    x.className = "fp-jcarousel-container";
    var y = document.createElement("div");
    y.className = "property_photo";
    x.appendChild(y);
    $("#" + carouselOptions.id + "-image-proxy").get(0).appendChild(x);
    var numListings = carouselOptions.numListings;
    var autoWidth = parseInt($(y).css("width")) * numListings;
    var requestedWidth = carouselOptions.containerWidth;
    var containerWidth = requestedWidth;
    if (autoWidth > requestedWidth) {
        containerWidth = autoWidth;
        containerWidth += numListings * 7;
    }
    
    var s = ".fp-jcarousel-container, .fp-jcarousel-container .jcarousel-container-horizontal, .fp-jcarousel-container .jcarousel-clip-horizontal { width: " + containerWidth + "px; }";
    var ss1 = document.createElement('style');
    var def = s;
    ss1.setAttribute("type", "text/css");
    if (ss1.styleSheet) {   // IE
        ss1.styleSheet.cssText = def;
    } else {                // the world
        var tt1 = document.createTextNode(def);
        ss1.appendChild(tt1);
    }
    var hh1 = document.getElementById('mycarousel-image-proxy');
    hh1.appendChild(ss1);

    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);
        });

        jQuery('.jcarousel-container img.prev_button').keypress(function(event) {
            if (event.keyCode == '13') {
                event.preventDefault();
                carousel.prev();
            }
        }).focus(function () {
            carousel.startAuto();
        }).attr('alt', 'View Previous Property');

        jQuery('.jcarousel-container img.next_button').keypress(function(event) {
            if (event.keyCode == '13') {
                event.preventDefault();
                carousel.next();
            }
        }).focus(function () {
            carousel.startAuto();
        }).attr('alt', 'View Next Property');

        $(window).blur(function() {
            carousel.stopAuto();
        });

        $(window).focus(function() {
            if (!$('#mycarousel .jcarousel-item-focus').length) {
                carousel.startAuto();
            }
        });

        $(window).click(function(event) {
            if ($('#mycarousel .jcarousel-item-focus').length) {
                var removeFocus = true;
                if (event.target.className
                        && (event.target.className.indexOf('.jcarousel-item-focus') != -1 || $(event.target).parent('.jcarousel-item-focus').length)) {
                    removeFocus = false;
                }

                if (removeFocus) {
                    $('#mycarousel .jcarousel-item-focus').removeClass('jcarousel-item-focus');
                    carousel.startAuto();
                }
            }
        });

        // buttons
        $("#mycarousel .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;
            // TODO: Where is #details defined?
            // 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);
        
        var listing = _listings[idx - 1];
        var item = carousel.add(i, mycarousel_getItemHTML(listing)).children(':first');
        
        item.focus(function() {
            $('#mycarousel .jcarousel-item-focus').removeClass('jcarousel-item-focus');
            item.addClass('jcarousel-item-focus');
            carousel.stopAuto();
        });

        item.hover(function() {
            carousel.stopAuto();
        }, function() {
            if (!item.hasClass('jcarousel-item-focus')) {
                carousel.startAuto();
            }
        });

        item.keypress(function(event) {
            if (event.keyCode == '13') {
                event.preventDefault();
                open_detail(listing.listingid, listing.listingurl + "/popup" + carousel_addToUrl, listing.overrideWebsiteid);
            } else if(event.keyCode == '9') {
                $('#mycarousel .jcarousel-item-focus').removeClass('jcarousel-item-focus');
                carousel.startAuto();
            }
        });
    };

    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" && item.acreage) {
            line_three_val = item.acreage //lnd
        } else {
            line_three_val = item.beds
            if (item.baths != "") {
                if (line_three_val != "") {
                    line_three_val += ", ";
                }
                line_three_val += 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 = "<div tabindex='0' onclick='open_detail(" +  item.listingid + ", \"" + item.listingurl + "/popup" + carousel_addToUrl + "\", " + item.overrideWebsiteid + ",\"" + _brokerOfficeUrl + "\");' style='cursor:pointer;'>" +
                        "<img class='property_photo' src='" + item.imagefilename + "' alt='' />" +
                        "<br /><div class='jcarousel-description-container'>" +
                        "<div class='jcarousel-price-text'>" + item.price + "</div>" +
                        "<div class='jcarousel-address-text'>" + item.address + "</div>" +
                        "<div class='jcarousel-city-state-text' title='" + city_state + "'>" + city_state_trimmed + "</div>" +
                        "<div class='jcarousel-line-three-text'>" + line_three_val + "</div>" +
                        "</div></div>";
        return html_string;
    };

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

        carouselContainer.children(':first').hide();
    }

    carousel_addToUrl = carouselOptions.addToUrl ? carouselOptions.addToUrl : "";
    if (carousel_addToUrl.length > 0 && carousel_addToUrl.substring(0, 1) != '?') {
        carousel_addToUrl = '?' + carousel_addToUrl;
    }
    jQuery.ajax({
    url: Utils.PublicAppName + '/Listing/JumpSearchListings.aspx?MaxResults=' + carouselOptions.maxResults + '&JumpSearch=' + carouselOptions.jumpSearchId,
        type: 'GET',
        async: true,
        dataType: 'json',
        success: function(json) {
            try {
                _listings = json.listing;
                
                if (json.count > 0) {
                    init_jcarousel(json.count, carouselOptions.numListings, carouselOptions.autoScroll);
                }
                else {
                    carouselContainer.children(':first').hide();
                }
            } catch (err) {
                if (typeof (console) != 'undefined')
                    console.error('Error: %s', err.message);
            }
        }
    });

    this.render = function() {

    }
}

function open_detail(listingid, listingurl, overrideWebsiteID, brokerOfficeUrl) {
    // For BAC:
    if (overrideWebsiteID && overrideWebsiteID > 0) {
        document.cookie = "rBW-PublicWebsiteID=" + overrideWebsiteID + "; path=/";
    }
    
    var root = "";
    if (window.location.hostname.indexOf("-dev") != -1) {
        root = "/public"; 
    } 
    var s_url = ((brokerOfficeUrl != '' && brokerOfficeUrl != 'http://') ? brokerOfficeUrl : '' ) + root + listingurl; 
    window.open(s_url, listingid, "width=820, height=650, location=1, scrollbars=1");
}

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

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;
}