function ListingPreviewer( config )
{
    this.container_id = config.container_id;
    this.cur_pointers = [];
    this.cells = [];
    this.listings = [];
    this.listing_pointer = 0;
    this.cell_width = 0;
    this.cell_container_width = 0;

    this.getPositionByIndex = function( index )
    {
        var pos = 0;
        var diff = this.cell_container_width - this.cell_width;
        switch( index )
        {
            case 0:
                pos = -( 2 * this.cell_width - ( diff / 2 ) );
                break;
            case 1:
                pos = -( this.cell_width - ( diff / 2 ) );
                break;
            case 2:
                pos = ( diff ) / 2;
                break;
            case 3:
                pos = this.cell_width + ( diff / 2 );
                break;
            case 4:
                pos = 2 * this.cell_width + ( diff / 2 );
                break;
            default:
                pos = this.cell_width / 2;
        }
        return pos;
    }

    this.getNextPosition = function( index, direction ){ return ( index + direction + this.cells.length ) % this.cells.length; }

    this.getListingFromCurrent = function( offset )
    {
        if( this.listings.length == 0 ) return null;

        if( !offset ) offset = 0;

        var point = ( this.listing_pointer + this.listings.length + offset ) % this.listings.length;

        return this.listings[point];
    }

    this.shift = function( dir )
    {
        var ani = $( '#' + this.container_id ).find( ':animated' );
        if( ani.length ) return;

        var pos_info = [];
        for( i = 0; i < this.cells.length; i++ )
        {
            var cell = jQuery( $( '#' + this.cells[i] ) );
            var loc_end = 0;
            if( i == this.cur_pointers[0] )
            {
                loc_end = ( dir < 0 ) ? this.getPositionByIndex( 2 ) : this.getPositionByIndex( 0 );
            }
            else if( i == this.cur_pointers[1] )
            {
                loc_end = ( dir < 0 ) ? loc_end = this.getPositionByIndex( 3 ) : this.getPositionByIndex( 1 );
            }
            else if( i == this.cur_pointers[2] )
            {
                loc_end = ( dir < 0 ) ? loc_end = this.getPositionByIndex( 4 ) : this.getPositionByIndex( 2 );
            }
            else
            {
                cell.empty();
                if( dir < 0 )
                {
                    cell.css( 'left', this.getPositionByIndex( 0 ) + 'px' );
                    cell.append( this.getCellContent( this.getListingFromCurrent( -2 ) ) );
                    loc_end = this.getPositionByIndex( 1 );
                }
                else
                {
                    cell.css( 'left', this.getPositionByIndex( 4 ) + 'px' );
                    cell.append( this.getCellContent( this.getListingFromCurrent( 2 ) ) );
                    loc_end = this.getPositionByIndex( 3 );
                }
            }

            var cell_pos = cell.position();
            var match = /(-?[\d\.]+)/.exec( cell_pos.left );
            var loc_start = match[1];

            pos_info[pos_info.length] = {
                start: loc_start,
                end: loc_end,
                elem_id: this.cells[i]
            };
        }

        //swap extra container contents
        for( i = 0; i < pos_info.length; i++ ){ $( '#' + pos_info[i].elem_id ).animate( { left: pos_info[i].end }, 800 ); }

        this.cur_pointers[0] = this.getNextPosition( this.cur_pointers[0], dir );
        this.cur_pointers[1] = this.getNextPosition( this.cur_pointers[1], dir );
        this.cur_pointers[2] = this.getNextPosition( this.cur_pointers[2], dir );

        this.listing_pointer = ( this.listing_pointer + this.listings.length + dir ) % this.listings.length;
    }

    this.getCellContent = function( listing )
    {
        var cell = jQuery( document.createElement( 'div' ) );
        cell.addClass( 'prop_cell' );

        var pic = jQuery( document.createElement( 'img' ) );
        pic.addClass( 'prop_img' );
        pic.attr( 'src', ( listing.display_pic ) ? listing.display_pic : '/uploadedPictures/thumbnails/picture_apartment_placeholder.gif' );

        var content = jQuery( document.createElement( 'div' ) );
        content.addClass( 'content' );

        var address = jQuery( document.createElement( 'div' ) );
        address.addClass( 'addy' );
        address.html( listing.address.truncate( 20, '...' ).valueOf() );

        var city = jQuery( document.createElement( 'span' ) );
        city.addClass( 'bold' );
        city.html( listing.city.truncate( 20, '...' ) + ', ' + listing.state );

        var info = jQuery( document.createElement( 'div' ) );
        info.addClass( 'info' );

        var price = jQuery( document.createElement( 'span' ) );
        price.addClass( 'bold' );
        price.html( '$' + listing.price_min + '-' + listing.price_max );
        var beds = jQuery( document.createElement( 'span' ) );
        beds.addClass( 'bold' );
        beds.html( listing.bedrooms );
        var baths = jQuery( document.createElement( 'span' ) );
        baths.addClass( 'bold' );
        baths.html( listing.bathrooms );
        var sqft = jQuery( document.createElement( 'span' ) );
        sqft.addClass( 'bold' );
        sqft.html( listing.square_feet );

        info.html( 'Price: ' );
        info.append( price );
        info.append( jQuery( document.createElement( 'br' ) ) );
        info.html( info.html() + 'Bedrooms: ' );
        info.append( beds );
        info.append( jQuery( document.createElement( 'br' ) ) );
        info.html( info.html() + 'Bathrooms: ' );
        info.append( baths );
        info.append( jQuery( document.createElement( 'br' ) ) );
        info.html( info.html() + 'Square Feet: ' );
        info.append( sqft );

        var link = jQuery( document.createElement( 'a' ) );
        link.addClass( 'view' );
        link.attr( 'href', listing.url );
        link.html( 'View Apartment' );

        address.append( jQuery( document.createElement( 'br' ) ) );
        address.append( city );
        content.append( address );
        content.append( info );
        content.append( link );
        
        cell.append( pic );
        cell.append( content );

        return cell;
    }

    this.buildHtml = function()
    {
        var container = $( '#' + this.container_id );
        container.html( '' );
        container.addClass( 'prop_container' );
        container.css( 'position', 'relative' );
        container.css( 'z-index', '0' );
        container.css( 'overflow', 'hidden' );
        container.css( 'display', 'block' );

        var prev_link = jQuery( document.createElement( "div" ) );
        prev_link.addClass( 'prop_btn_prev' );

        var next_link = jQuery( document.createElement( "div" ) );
        next_link.addClass( 'prop_btn_next' );

        var listings = jQuery( document.createElement( 'div' ) );
        listings.addClass( 'prop_listings' );
        listings.css( 'overflow', 'hidden' );

        var occ_l = jQuery( document.createElement( 'div' ) );
        occ_l.addClass( 'prop_occ_l' );

        var occ_r = jQuery( document.createElement( 'div' ) );
        occ_r.addClass( 'prop_occ_r' );

        listings.append( occ_l );
        listings.append( occ_r );

        container.append( prev_link );
        container.append( next_link );
        container.append( listings );

        if( this.listings.length > 0 )
        {
            var cell_1 = jQuery( document.createElement( "div" ) );
            var cell_2 = jQuery( document.createElement( "div" ) );
            var cell_3 = jQuery( document.createElement( "div" ) );
            var cell_4 = jQuery( document.createElement( "div" ) );

            listings.append( cell_1 );
            listings.append( cell_2 );
            listings.append( cell_3 );
            listings.append( cell_4 );

            cell_1.attr( 'id', this.container_id + '_cell_1' );
            cell_2.attr( 'id', this.container_id + '_cell_2' );
            cell_3.attr( 'id', this.container_id + '_cell_3' );
            cell_4.attr( 'id', this.container_id + '_cell_4' );

            this.cells[0] = this.container_id + "_cell_1";
            this.cells[1] = this.container_id + "_cell_2";
            this.cells[2] = this.container_id + "_cell_3";
            this.cells[3] = this.container_id + "_cell_4";

            cell_1.addClass( 'prop_listing' );
            cell_2.addClass( 'prop_listing' );
            cell_3.addClass( 'prop_listing' );
            cell_4.addClass( 'prop_listing' );

            this.cell_container_width = listings.outerWidth();
            this.cell_width = ( cell_1.outerWidth() ) ? cell_1.outerWidth() : ( this.cell_container_width / 2 );

            cell_1.append( this.getCellContent( this.getListingFromCurrent( -1 ) ) );
            cell_2.append( this.getCellContent( this.getListingFromCurrent() ) );
            cell_3.append( this.getCellContent( this.getListingFromCurrent( 1 ) ) );

            cell_1.css( 'position', 'absolute' );
            cell_2.css( 'position', 'absolute' );
            cell_3.css( 'position', 'absolute' );
            cell_4.css( 'position', 'absolute' );

            cell_1.css( 'width', this.cell_width + 'px' );
            cell_2.css( 'width', this.cell_width + 'px' );
            cell_3.css( 'width', this.cell_width + 'px' );
            cell_4.css( 'width', this.cell_width + 'px' );

            cell_1.css( 'height', '100%' );
            cell_2.css( 'height', '100%' );
            cell_3.css( 'height', '100%' );
            cell_4.css( 'height', '100%' );
            
            cell_1.css( 'left', this.getPositionByIndex( 1 ) + "px" );
            cell_2.css( 'left', this.getPositionByIndex( 2 ) + "px" );
            cell_3.css( 'left', this.getPositionByIndex( 3 ) + "px" );
            cell_4.css( 'left', this.getPositionByIndex( 4 ) + "px" );

            cell_1.css( 'background-color', '#FFF' );
            cell_2.css( 'background-color', '#FFF' );
            cell_3.css( 'background-color', '#FFF' );
            cell_4.css( 'background-color', '#FFF' );

            this.cur_pointers[0] = 0;
            this.cur_pointers[1] = 1;
            this.cur_pointers[2] = 2;

            var lp = this;
            prev_link.click( function( e ){ lp.shift( -1 );spottago.event.kill( e ); } );
            next_link.click( function( e ){ lp.shift( 1 );spottago.event.kill( e ); } );
        }
        else //no listings found
        {
            var empty = jQuery( document.createElement( 'div' ) );
            empty.css( 'width', listings.outerWidth() + 'px' );
            empty.css( 'height', ( listings.outerHeight() - 50 ) + 'px' );
            empty.css( 'padding', '55px 0 0' );
            empty.css( 'background', '#FFF' );
            empty.css( 'text-align', 'center' );
            empty.html( 'Some bad juju happened.  No preview listings were found!' );
            listings.append( empty );
        }
    }

    this.initialize = function()
    {
        var container = $( '#' + this.container_id );

        var listings = container.find( 'div' );

        for( var i = 0; i < listings.length; i++ )
        {
            var apt = {};
            var data = jQuery( listings[i] ).find( 'input' );
            for( var j = 0; j < data.length; j++ )
            {
                apt[data[j].name] = data[j].value;
            }
            this.listings.push( apt );
            jQuery( listings[i] ).remove();
        }

        this.listing_pointer = 1;

        this.buildHtml();
    }
    this.initialize();
}