window.addEvent('domready', function() {
    var periodical;
    var url = 'images/slideshow/';
    var i = 0;
    var images = ['door_ani2.gif', 'door_ani2.gif', '1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png', '8.png', '9.png', '10.png', '11.png', '12.png'];
    var large_images = ['1.png', '4.png', '5.png', '11.png', '12.png'];

    //create and embed the large slides - hidden
    for (m = 0; m < large_images.length; m++) {
        var cont = new Element('div', { 'id': 'large_slide' + m, 'class': 'large_slide' });
        cont.setStyle('display', 'none');
        var el = new Element('img', { 'src': url + 'large/' + large_images[m] });
        el.inject(cont);
        cont.inject($('center'), 'before');
    }

    //set roll out function
    /*dude	*/

    var go = function() {
        image = images[i];
        i++;
        if (i == images.length) {
            i = 0;
        }
        $('slideshow').setProperty('src', url + image);

        $('slideshow').addEvent('mouseover', do_big);
    }

    var do_big = function(e) {
        $('slideshow').removeEvents();

        //choose the large image number
        var k = Math.floor(Math.random() * (large_images.length - 1));

        //slideshow cycler
        cont.go = function() {
            k++;
            //advance to next
            if (k == large_images.length) {
                k = 0;
            }

            var prev = k - 1;
            if (prev < 0) {
                prev = large_images.length - 1;
            }
            image = $('large_slide' + prev);
            image.setStyle('display', 'none');
            $('center').removeEvents();

            image = $('large_slide' + k);
            image.setStyle('display', 'block');

            var pos = image.getPosition();
            var size = image.getSize();
            var left = pos.x;
            var top = pos.y;
            var right = pos.x + size.x;
            var bottom = pos.y + size.y;

            $('center').addEvent('mousemove', function(e) {
                var posx = e.page.x;
                var posy = e.page.y;

                //console.log(left+' '+top+' '+right+' '+bottom+' - '+posx+' '+posy);

                if (posx < left + 5 || posx > right - 5 || posy < top + 5 || posy > bottom - 5) {
                    //console.log('out of bounds');
                    $$('.large_slide').each(function(item) { item.setStyle('display', 'none'); });
                    $clear(periodical2);
                    $('slideshow').addEvent('mouseover', do_big);
                    $('center').removeEvents();
                }

            });


            /*var myFx = new Fx.Tween(cont, {property: 'opacity'});


				myFx.start(1,0).chain(
            //Notice that "this" refers to the calling object (in this case, the myFx object).
            function(){ cont.getElementsByTagName('img')[0].setProperty('src',url+'large/'+image).setProperty('width',large_image_sizes[k][0]).setProperty('height',large_image_sizes[k][1]).setStyle('opacity',0);}).chain(
            function(){ this.start(0,1); }
            );		*/
        }

        cont.go();

        //set slideshow timer				
        periodical2 = cont.go.periodical(5000);
    }




    go();
    periodical = go.periodical(5000);

/*
    assign = function() {
        $('left').addEvent('mouseover', function(e) {
            //popup image here
            var cont = new Element('div', { 'class': 'large_slide_left' });
            var el = new Element('img', { 'src': url + 'large/left.png' });
            el.inject(cont);
            cont.inject($('center'), 'before');
            cont.addEvent('mouseout', function(e) {
                cont.dispose();
                assign();
            });
            $('left').removeEvents();
        });
    }
    assign();
 */
});