function DrawGalleryOptions(div) {

    $('gallery').css({ width: '503px', height: '300px' });
    $(div).append('<div class="gallery-title"><p style="font-size:14px;">no title</p><div class="gallery-bg gallery-bg-small"></div></div>');
    $(div).append('<div class="gallery-nav"></div>');
    $('.gallery-nav').append('<div class="gallery-bg"></div><div class="gallery-controls"><p class="gall-title"><a class="gallleft" href="#galleryleft" title="">Previous Image</a><a class="gallright" href="#galleryright" title="">Next Image</a></p></div>');

    $('.gallery-title, .gallery-nav, .gallery-bg').css({ position: 'absolute', left: '0px', height: '30px', width: '503px' });
    $('.gallery-nav').css({ height: '60px', bottom: '-60px' });
    $('.gallery-bg').css({ backgroundColor: '#5974c5', opacity: 0.7, height: '60px', zIndex: 1000 });
    $('.gallery-title').css({ top: '-30px' });
    $('.gallery-controls').css({ position: 'absolute', zIndex: 1002 });
    $('.gallery-bg-small').css({ height: '30px' });
    $('.gallery-title p').css({ zIndex: 1002, color: '#ffffff', position: 'absolute', padding: '5px' });
    $('.gallery-controls p').css({ posistion: 'absolute', zIndex: 1005, left: '0px', top: '0px' });
    $('a.gallleft').css({ width: '82px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryleft.gif)', backgroundPosition: 'left top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '15px', position: 'absolute', paddingTop: '25px' });
    $('a.gallright').css({ width: '58px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryright.gif)', backgroundPosition: 'right top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '430px', position: 'absolute', paddingTop: '25px' });
}

function ShowGalleryOptions() {

    jQuery.easing.def = "easeOutQuint";
    $('.gallery-title').animate({ top: '0px' }, 800);
    $('.gallery-nav').animate({ bottom: '0px' }, 800);

}

function HideGalleryOptions() {

    $('.gallery-title').animate({ top: '-30px' }, 800);
    $('.gallery-nav').animate({ bottom: '-60px' }, 800);

}

function StopAll() {

    $('.gallery-title').stop();
    $('.gallery-nav').stop();

}


function MoveGallery(pic) {

    //$('#test2').html('>> <br />' + pic[_GalleryCurrent].src + " " + pic[_GalleryCurrent].height + " " + pic[_GalleryCurrent].width + "<br />Current: " + _GalleryCurrent);

    $('.gallery').append('<img id="gallery-current" style="display:none;" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
    $('#gallery-current').css({ opacity: 0, display: 'block' });
    $('.gallery img').css({ position: 'absolute', top: '0px', left: '0px', zIndex: '400' });
    //jQuery.easing.def = "easeOutElastic";

    $('.gallery-nav, .gallery-title').css({ position: 'absolute', left: '0px', zIndex: '1100' }); // random reassignement of gallery zIndex, because IE7 doesn't behave

    $('.gallery-title p').html(pic[_GalleryCurrent].alt);

    $('#gallery-current').animate({ opacity: 1 }, 1200, function() {

        $('#gallery-last').remove();
        $('#gallery-current').attr('id', 'gallery-last');

    });
    $('.gallery-controls').css({ position: 'absolute', zIndex: 1102 });


}


$(function() {

    var pic;
    pic = $(".gallery").children("img");
    _GalleryMax = pic.length - 1;
    _GalleryCurrent = 0;

    //$('#test2').html('>><br />' + pic[_].src + " " + pic[0].height + " " + pic[0].width + "<br />Current: " + _GalleryCurrent);

    $('.gallery').css({ height: 283, overflow: 'hidden', position: 'relative' });
    $('.gallery').html('');

    DrawGalleryOptions('.gallery');

    $('.gallery').append('<img id="gallery-last" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
    $('.gallery-title p').html(pic[_GalleryCurrent].alt);

    $('.gallery').hover(function() {

        //alert('on');
        StopAll();
        ShowGalleryOptions();

    },
                    function() {

                        //alert('off');
                        StopAll();
                        HideGalleryOptions();

                    });

    $('a.gallright').click(function() {

        $('#gallery-current').stop(false, true);

        //alert('boota');
        _GalleryCurrent = _GalleryCurrent + 1;
        if (_GalleryCurrent > _GalleryMax) {
            _GalleryCurrent = 0;
        }

        MoveGallery(pic);

    });

    $('a.gallleft').click(function() {

        $('#gallery-current').stop(false, true);

        //alert('boota');
        _GalleryCurrent = _GalleryCurrent - 1;
        if (_GalleryCurrent < 0) {
            _GalleryCurrent = _GalleryMax;
        }

        MoveGallery(pic);

    });

});