var STATE = 0
var image1 = document.getElementById('image1')
var image2 = document.getElementById('image2')
var image3 = document.getElementById('image3')

document.getElementById('next').onclick = function next() {
    switch (STATE) {
        case 0: toState1(); break
        case 1: toState2(); break
        case 2: toState0(); break
    }
}

document.getElementById('preview').onclick = function preview() {
    switch (STATE) {
        case 0: toState2(); break
        case 1: toState0(); break
        case 2: toState1(); break
    }
}

function toState0() {
    STATE = 0

    image1.style.webkitTransform = image3.style.webkitTransform = 'scale(1)'
    image2.style.webkitTransform = 'scale(1.2)'

    image1.style.zIndex = image3.style.zIndex = 0
    image2.style.zIndex = 1

    image1.style.right = "-150px"
    image2.style.right = "0px"
    image3.style.right = "150px"
}

function toState1() {
    STATE = 1

    image1.style.webkitTransform = 'scale(1.2)'
    image2.style.webkitTransform = image3.style.webkitTransform = 'scale(1)'

    image1.style.zIndex = 1
    image2.style.zIndex = image3.style.zIndex = 0

    image1.style.right = '-450px'
    image2.style.right = '-300px'
    image3.style.right = '750px'
}

function toState2() {
    STATE = 2

    image1.style.webkitTransform = image2.style.webkitTransform = 'scale(1)'
    image3.style.webkitTransform = 'scale(1.2)';

    image1.style.zIndex = image2.style.zIndex = 0
    image3.style.zIndex = 1

    image1.style.right = '-750px'
    image2.style.right = '300px'
    image3.style.right = '450px'
}