$(document).ready(function() {

    if ($.browser.msie && $.browser.version < 7) {
        $('img[src$=.png]').pngfix();
    }

    $('img[data-hover],input[data-hover]').imghover();
	
    // init tooltips
    $(".imagegrid div a img").tooltip({
        track: true,
        delay: 0,
        showURL: false,
        extraClass: "right"
    });

    var grid = $('#homegrid');
    var griditems = {
        square: [],
        landscape: []
    };
    var availableitems = {
        square: [],
        landscape: []
    };
    var typebyitem = [];

    grid.find('a').each(function() {
        var imagetype = $(this).find('img').attr('data-imagetype');
        griditems[imagetype].push($(this).attr('data-id'));
    });

    for (var i in allrecords) {
        var record = allrecords[i];
        var imagetype = record.imagetype;
        typebyitem[i] = imagetype;
        if ($.inArray(i, griditems[imagetype]) == -1) {
            availableitems[imagetype].push(i);
        }
    }


    function replaceRandom() {
        // pick id to be replaced
        var currentids = griditems.square.concat(griditems.landscape);
        var replaceindex = Math.floor(Math.random() * currentids.length);
        var replaceitemid = currentids[replaceindex];
        var replaceitem = allrecords[replaceitemid];

        // pick id for replacing replaceitem
        var newids = availableitems[replaceitem.imagetype];
        var newindex = Math.floor(Math.random() * newids.length);
        var newitemid = newids[newindex];
        var newitem = allrecords[newitemid];

        // fade it you must
        grid.find('a[data-id=' + replaceitemid + ']>img').each(function(){
            var newimage = "background:url('" + newitem.imageurl + "');";
            $(this).wrap('<div style="' + newimage + '">');
            $(this).animate({
                    opacity: 0
                },
                600,
                function() {
                    $(this)
                        .attr('title', newitem.title)
                        .attr('src', newitem.imageurl).animate({
                                opacity: 1
                            },
                            600
                        )
                        .tooltip({
                            track: true,
                            delay: 0,
                            showURL: false,
                            extraClass: "right"
                        })
                        .parent('a')
                            .attr('data-id', newitemid)
                            .attr('data-type', newitem.type)
                            .attr('href', newitem.url);

                    var tt = $('#tooltip h3');
                    if (tt.text() == replaceitem.title) {
                        tt.text(newitem.title);
                    }
                }
            );

            $(this).unwrap();
        });

        for (i in griditems[replaceitem.imagetype]) {
            if (griditems[replaceitem.imagetype][i] == replaceitemid) {
                griditems[replaceitem.imagetype][i] = newitemid;
            }
        }

        for (i in availableitems[newitem.imagetype]) {
            if (availableitems[newitem.imagetype][i] == newitemid) {
                availableitems[newitem.imagetype][i] = replaceitemid;
            }
        }
    }

    if (grid.length) {
        var homeitv = setInterval(replaceRandom, 2000);
    }

});