Having Trouble With Circular Array And Large Image Displayed

I'm working on a little banner ad test and can't seem to figure out how to fix the way the main image is displaying in accordance with the thumbnails due to the code I put in speci

Solution 1:

Example

CSS

#wrapper {
    width:320px;
    height:480px;
}
#background {
    background-color:#e8e8de;
    position:relative;
    width:100%;
    height:100%
}
#logo, #main, #mainphoto, #black, #nav, #previous, #current, #next {
    width:100%;
}
#logo {
    background: url(http://www.kamiblue.com/hotelstest/images/logo.png) no-repeat;
    height:49px;
}
#main {
    height:320px;
}
#mainphoto {
    height:100%;
    display:block;
}
#black {
    position:absolute;
    height:120px;
    -webkit-border-radius:13px13px13px13px;
    -moz-border-radius:13px13px13px13px;
    border-radius:13px13px13px13px;
    background-color:#333333;
    bottom:80px;
}
#paras {
    position:relative;
    left:10px;
    font-family:Arial;
    font-weight:bold;
    font-size:1.3em;
    color:#FFFFFF;
}
#para1, #para4 {
    font-size:1.5em;
}
#para3 {
    color:#000000;
    text-decoration:line-through;
}
#para4 {
    color:#EE2E33;
}
#bookNow {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/cta.png) no-repeat;
    width:170px;
    height:56px;
    bottom:5px;
    right:2px;
}
#bookNow:hover {
    cursor:pointer;
}
#previousWrap, #currentWrap, #nextWrap {
    width:33.3%;
    float:left;
}
#previous, #current, #next {
    height:110px;
}
#leftnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goleft2.png) no-repeat;
    left:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#leftnav:hover {
    cursor:pointer;
}
#rightnav {
    position:absolute;
    background: url(http://www.kamiblue.com/hotelstest/images/goright2.png) no-repeat;
    right:0px;
    bottom:0px;
    width:44px;
    height:44px;
}
#rightnav:hover {
    cursor:pointer;
}

HTML

<divid="wrapper"><divid="background"><divid="logo"></div><divid="main"><imgid="mainphoto"></img><divid="black"><divid="paras"><divid="para1"></div><divid="para2"></div><divid="para3"></div><divid="para4"></div></div><divid="bookNow"></div></div></div><divid="nav"><divid="leftnav"></div><divid="rightnav"></div><divid="previousWrap"><imgid="previous"></img></div><divid="currentWrap"><imgid="current"></img></div><divid="nextWrap"><imgid="next"></img></div></div></div></div>

Javascript

function RingArray(object, position) {
    this.array = RingArray.compact(object);
    this.setPosition(position);
}

RingArray.toInt32 = function (number) {
    return number >> 0;
};

RingArray.toUint32 = function (number) {
    return number >>> 0;
};

RingArray.isOdd = function (number) {
    return number % 2 === 1;
};

RingArray.indexWrap = function (index, length) {
    index = RingArray.toInt32(index);
    length = RingArray.toUint32(length);
    if (index < 0 && RingArray.isOdd(length)) {
        index -= 1;
    }

    return RingArray.toUint32(index) % length;
};

RingArray.compact = (function (filter) {
    var compact;

    if (typeof filter === 'function') {
        compact = function (object) {
            return filter.call(object, function (element) {
                return element;
            });
        };
    } else {
        compact = function (object) {
            object = Object(object);
            var array = [],
                length = RingArray.toUint32(object.length),
                index;

            for (index = 0; index < length; index += 1) {
                if (index inobject) {
                    array.push(object[index]);
                }
            }

            return array;
        };
    }

    return compact;
}(Array.prototype.filter));

RingArray.prototype = {
    setPosition: function (position) {
        this.position = RingArray.indexWrap(position, this.array.length);

        returnthis;
    },

    setToStart: function () {
        returnthis.setPosition(0);
    },

    setToEnd: function () {
        returnthis.setPosition(this.array.length - 1);
    },

    setRandom: function () {
        returnthis.setPosition(Math.floor(Math.random() * this.array.length));
    },

    increment: function (amount) {
        returnthis.setPosition(this.position + (RingArray.toInt32(amount) || 1));
    },

    previousElement: function () {
        returnthis.array[RingArray.indexWrap(this.position - 1, this.array.length)];
    },

    currentElement: function () {
        returnthis.array[this.position];
    },

    nextElement: function () {
        returnthis.array[RingArray.indexWrap(this.position + 1, this.array.length)];
    }
};

var mainphoto = document.getElementById('mainphoto'),
    previous = document.getElementById('previous'),
    current = document.getElementById('current'),
    next = document.getElementById('next'),
    para1 = document.getElementById("para1"),
    para2 = document.getElementById("para2"),
    para3 = document.getElementById("para3"),
    para4 = document.getElementById("para4"),
    offers = [{
        url: "http://www.liferingart.com/hoteltest/images/mainphoto0.jpg",
        name: 'Hotel Hospes',
        location: 'Madrid, Spain',
        price: '$289',
        offer: '$242'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto1.jpg",
        name: 'Hotel Godard',
        location: 'Paris, France',
        price: '$1200',
        offer: '$1099'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto2.jpg",
        name: 'Park Hyatt',
        location: 'Tokyo, Japan',
        price: '$1500',
        offer: '$1399'
    }, {
        url: "http://www.liferingart.com/hoteltest/images/mainphoto3.jpg",
        name: 'Hotel Citadel',
        location: 'Amsterdam, The Netherlands',
        price: '$180',
        offer: '$157'
    }],
    offersRing = new RingArray(offers);

function update(x) {
    var currentOffer = offersRing.currentElement();

    mainphoto.src = current.src = currentOffer.url;
    para1.textContent = currentOffer.name;
    para2.textContent = currentOffer.location;
    para3.textContent = currentOffer.price;
    para4.textContent = currentOffer.offer;

    previous.src = offersRing.previousElement().url;
    next.src = offersRing.nextElement().url;
}

document.getElementById("leftnav").addEventListener("click", function () {
    offersRing.increment(-1);
    update();
}, false);

document.getElementById("rightnav").addEventListener("click", function () {
    offersRing.increment(1);
    update();
}, false);

update();

On jsFiddle