$(document).ready(function() {

    var pictures = $('.doc-img img');
    var data = {};
    var images = [];
    var sceneFilled = false;
    var picCount = 18;
    var picUpdateDelay = 15000;

    var peekRandomPicture = function() {
        if (sceneFilled) {
            return $('.doc-img img').eq(Math.ceil(Math.random() * picCount - 1));
        } else {
            var elements = $('.doc-img img[ref="clear"]');
            if (elements.length != 0) {
                return elements.eq(Math.ceil(Math.random() * elements.length - 1));
            } else {
                sceneFilled = true;
                return peekRandomPicture();
            }
        }
    }

    var getSources = function() {
        //TODO: Put ajax integration
        return [{ id: 0, src: '../../Content/Images/0_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/1_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/2_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/3_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/4_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/5_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/6_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/7_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/8_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/9_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/10_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/11_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/12_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/13_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/14_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/15_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/16_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/17_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/18_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/19_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/20_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/21_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/22_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/23_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/24_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/25_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/26_t.jpg', data: 'text1' },
                { id: 0, src: '../../Content/Images/27_t.jpg', data: 'text1'}]
    }

    var getInfo = function(dataid, fn) {
        //TODO: Ajax integration
        var data = { id: dataid, title: 'title' + dataid, text: 'text' + dataid };
        fn(data);
    }

    var getPictures = function(picsources) {
        var img;
        for (var i = 0; i < picsources.length; i++) {
            img = new Image();
            img.onload = (function(img, images) { return function() { images.push(img); } })(img, images);
            img.src = picsources[i].src;
            data[picsources[i].id] = picsources[i];
            img.setAttribute('dataid', picsources[i].id);
        }
    }

    var peekRandomImage = function() {
        if (images.length != 0) {
            var img = images.pop();
            var timer = setTimeout((function(images, img) {
                return function() {
                    var active = $('.doc-img img[src="' + img.src + '"]');
                    if (active.length > 0) {
                        active.each(function() {
                            $(this).fadeOut('slow');
                        });
                        images.push(img);
                    } else {
                        images.push(img);
                    }
                }
            })(images, img), picUpdateDelay);
            return img;
        } else {
            return null;
        }
    }

    var updatePicture = function(picture, img) {
        picture.fadeOut('slow', function() {
            picture.attr('ref', 'active').attr('dataid', img.getAttribute('dataid')).attr('src', img.src).fadeIn('slow', (function(picture) {
                return function() {
                    var fn = function() {
                        picture.attr('ref', 'clear');
                    }
                    var t = setTimeout(fn, picUpdateDelay);
                }
            })(picture));
        })
    }

    var updateScene = function() {
        var img = peekRandomImage();
        if (img != null) {
            updatePicture(peekRandomPicture(), img);
        }
    }

    var pictureClick = function(e) {
        var dataid = this.getAttribute('dataid');
        var pos = this.id.replace('i', '');
        if (dataid) {
            if (infoPopup.css('display') == 'block') {
                showPicturePopup(dataid);
            } else {
                showInfoPopup(pos, dataid);
            }
            //calcAvailSpace(pos);
        }
    }

    var calcAvailSpace = function(pos) {
        var row = Math.ceil(pos / 6);
        var index = pos - (row - 1) * 6;

        $('.doc-img img').each(function() { $(this).css('border', '1px solid #fff') })
        //to debug
        var elements = $('.doc-img img').filter(function(i) {
            iRow = Math.ceil(i / 6);
            iIndex = i - (iRow - 1) * 6;

            if (index == 1) {
                if (iIndex < index || (iIndex >= index + 3))
                    return true;
                else return false;
            }
            if (index == 2) {
                if (iIndex < index || ((iIndex >= index + 3) && (iIndex < 6)))
                    return true;
                else return false;
            }
            return false;
        })
        elements.each(function() { $(this).css('border', '1px solid #c00') })
    }

    var infoPopup = $('#info');
    var showInfoPopup = function(pos, dataid) {
        var row = Math.ceil(pos / 6);
        var index = pos - (row - 1) * 6;
        var offset = '254px';
        if (index < 4) {
            offset = index * 127 + 'px';
        }
        else if (index > 3) {
            offset = (index - 4) * 127 + 'px';
        }
        infoPopup.css('left', offset);
        getInfo(dataid, function(info) {
            $('#info-title').html(info.title);
            $('#info-content').html(info.text);
            infoPopup.fadeIn();
        });
    }

    var picturePopup = $('#picture');
    var showPicturePopup = function(dataid) {
        picturePopup.show();
    }
    var hidePicturePopup = function() {
        picturePopup.hide();
    }
    //$('#picture-close').bind('click', hidePicturePopup)

    var hideInfoPopup = function() {
        infoPopup.fadeOut();
    }
    $('#content-close').bind('click', hideInfoPopup)

    getPictures(getSources());
    var r = setInterval(updateScene, 800);

    //pictures.bind('click', pictureClick)
})