$( function()
{
    var gal = new StartGallery( window.start_gallery );
    gal.setCurrentImage( $( '#start-gallery-currentimage' ) );
} );

var StartGallery = function( images )
{
    this.init( images );
}

StartGallery.prototype = {

    images: [],
    currentimage: false,
    pointer: 0,
    descriptionhidden: true,

    init: function( images )
    {
        if( !$( '#image-description' ).length )
        {
            var desc = $( '<div id="image-description"> \
                               <div id="description-wrapper"> \
                                   <h4></h4> \
                                   <p></p> \
                              </div> \
                              <span id="toggle-image-description">Info</span> \
                           </div>' );

            $( '#start-gallery-container' ).append( desc );
            desc.hide();
        }

        var context = this;
        for( var i = 0; i < images.length; i++ )
        {
            //this.preloadImages( images[i].img );
        }
        if( images[0] ) context.preloadImages( images[0]['img'] );
        if( images[1] ) context.preloadImages( images[1]['img'] );
        if( images[2] ) context.preloadImages( images[2]['img'] );
        if( images[3] ) context.preloadImages( images[3]['img'] );

        this.images = images;
        var context = this;
        $( '#toggle-image-description' ).bind( 'click', { context: context }, this.toggleDescription );
        setInterval( function() { context.nextImage(); }, 7500 );
    },

    setCurrentImage: function( i )
    {
        this.currentimage = i;
    },

	toggleDescription: function( e )
	{
	    context = e.data.context;
		if( context.descriptionhidden )
		{
			$( this ).html( 'Dölj info' );
			$( this.parentNode ).animate( { width: 250 } );
			context.descriptionhidden = false;
		}
		else
		{
			$( this ).html( 'Info' );
			$( this.parentNode ).animate( { width: 30 } );
			context.descriptionhidden = true;
		}

		$( '#description-wrapper' ).toggle();
	},

	preloadImages: function()
	{
		var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=arguments; for(i=0; i<a.length; i++)
		if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
	},

    nextImage: function()
    {
        var context = this;
        if( !this.images[this.pointer] ) this.pointer = 0;

        var new_image = this.images[this.pointer];
        var image = new Image();
        image.src = new_image['img'];

        var next_image = this.images[this.pointer + 1];
        if( next_image ) context.preloadImages( next_image['img'] );

        var next_image = this.images[this.pointer + 2];
        if( next_image ) context.preloadImages( next_image['img'] );

        var next_image = this.images[this.pointer + 3];
        if( next_image ) context.preloadImages( next_image['img'] );

        if( new_image['headline'].length )
        {
            $( '#description-wrapper h4' ).html( new_image['headline'] );
        }

        if( new_image['description'].length )
        {
            $( '#description-wrapper p' ).html( new_image['description'] );
            $( '#image-description' ).show();
        }
        else
        {
            $( '#image-description' ).hide();
        }


        var image = $( image );
        image.css( 'opacity', 0 );
        context.currentimage.parent().append( image );
        context.currentimage.animate( { opacity: 0 }, 'slow' );
        image.animate( { opacity: 1 }, 'slow', null,
            function()
            {
                context.currentimage.remove();
                context.currentimage = image;
            }
        );
        this.pointer++;
    }
}