//Setup some variables to use
var jqueryslideshow_jsonpropertylist = "/properties/xml?format=json&max=0&sf=1&pf=1";
var TRANSITION_DURATION = 1000;
var slideshow;

var ListingSlideshow = function () {
    this.interval = 6000;
    this.isPaused = false;
    this.nextIndex = -1;
    this.currIndex = -1;
    this.listings = -1;
    this.maxListings = 0;
    this.timer = 0;
    this.obj = $('#propertyslideshow');
}

ListingSlideshow.getImageUrl = function (listing) {
    var url = '';
    var parts = [];

    try {

        url = listing.MainPicture;
        url = '/property/' + url.split('/property/').pop(); //break off the http://www.domain.com/ portion. We want the relative path only

        //Replace the last element of the URL [the image size in this case] with a j.
        parts = url.split('/');
        parts.pop();
        parts.push('j');

        url = parts.join('/');
    }
    catch (e) {
        //ignore errors parsing the url. if there is an error, we dont want to break the rest of the javascript
    }

    return url;
}



//Get the slideshow started
$(document).ready(function () {

    slideshow = new ListingSlideshow();

    //Load up the properties in JSON
    $.getJSON(jqueryslideshow_jsonpropertylist,
	function (json) {
	    if (json.length > 0) {
	        slideshow.listings = json; //set our variable equal to data from property feed
	        slideshow.maxListings = slideshow.listings.length; //set the max property value
	        JquerySlideshow_Setup();
	    }
	    else {
	        slideshow.obj.remove();
	    }
	});
});




function JquerySlideshow_Setup() {
    slideshow.isPaused = false;
    $('#slide').find("#propertytitle").show();
    $('#viewproperty').show("slow");
    $('#controls').show("slow");
    $('#propertypag').show("slow");

    JquerySlideshow_Advance();
    JquerySlideshow_Start();
}

//Start the slideshow up
function JquerySlideshow_Start() {
    slideshow.isPaused = false;
    slideshow.obj.find('#controls').find(".play").attr("class", "pause");
    slideshow.timer = $.timer(slideshow.interval, function (timer) { JquerySlideshow_Advance(); });
}

//Advance the slide show
function JquerySlideshow_Advance() {
    slideshow.currIndex = slideshow.currIndex + 1;
    if (slideshow.currIndex >= slideshow.maxListings) {
        slideshow.currIndex = 0;
    }

    JquerySlideshow_FadeToNextSlide();

    slideshow.nextIndex = slideshow.currIndex + 1;

    if (slideshow.nextIndex >= slideshow.maxListings) {
        slideshow.nextIndex = 0;
    }
}

//Pause the slideshow
function JquerySlideshow_Pause() {
    slideshow.isPaused = true; //set variable to say we are paused
    slideshow.obj.find('#controls').find(".pause").attr("class", "play");
    slideshow.timer.stop();
}

//Toggle Play and Pause
function JquerySlideshow_TogglePlayPause() {
    if (slideshow.isPaused) {
        JquerySlideshow_Advance();
        JquerySlideshow_Start();
    }
    else {
        JquerySlideshow_Pause();
    }
}

//Manual Slideshow Advance
function JquerySlideshow_AdvanceSlide() {
    if (!slideshow.isPaused) {
        JquerySlideshow_Pause(); //since this was trigged manually, we should pause it
    }
    JquerySlideshow_Advance();
}

//Manual Slideshow Rewind
function JquerySlideshow_Rewind() {
    if (!slideshow.isPaused) {
        JquerySlideshow_Pause(); //since this was trigged manually, we should pause it
    }

    slideshow.currIndex = slideshow.currIndex - 1;

    if (slideshow.currIndex < 0) {
        slideshow.currIndex = slideshow.maxListings - 1;
    }

    //set the slide
    JquerySlideshow_FadeToNextSlide();

}

//Set the slide image
function JquerySlideshow_FadeToNextSlide() {

    var visible = slideshow.obj.find('#slide').find('img.visible');
    var hidden = slideshow.obj.find('#slide').find('img.hidden');

    fadeOutVisibleImage(visible);
    fadeInHiddenImage(hidden);

}

function fadeOutVisibleImage(visible) {

    visible.fadeOut(TRANSITION_DURATION, function () {
        visible.removeClass('visible').addClass('hidden');

        //preload next image
        var img = new Image();
        img.src = ListingSlideshow.getImageUrl(slideshow.listings[slideshow.nextIndex]);

        visible.attr('src', img.src);
    });
}

function fadeInHiddenImage(hidden) {

    var page;
    var src = ListingSlideshow.getImageUrl(slideshow.listings[slideshow.currIndex]);
    hidden.attr('src', src);
    hidden.fadeIn(TRANSITION_DURATION, function () {
        hidden.removeClass('hidden').addClass('visible');
    });

    hidden.attr('alt', getFormattedPropertyTitle());

    //set the slide paging value
    page = 'Property {0} of {1}'.format((slideshow.currIndex + 1), slideshow.maxListings);
    slideshow.obj.find('#propertypag').html(page);

    JquerySlideshow_setSlideTitle();

    //set the property link
    slideshow.obj.find('#viewproperty').find('a').attr("href", slideshow.listings[slideshow.currIndex].rellink.Url);
}


function JquerySlideshow_setSlideTitle() {
    var titleElem = slideshow.obj.find('#slide').find('#propertytitle');

    titleElem.find("span").fadeOut(TRANSITION_DURATION, function () {
        titleElem.find("span").html(getFormattedPropertyTitle());
        titleElem.find("span").fadeIn(TRANSITION_DURATION);
    });
}

function getFormattedPropertyTitle() {
    return slideshow.listings[slideshow.currIndex].FormattedPrice +
        ' - ' + slideshow.listings[slideshow.currIndex].City +
        ', ' + slideshow.listings[slideshow.currIndex].State;
}