var docsize = [];
var allthumbs = [];
var current_img = 0;
var ap = 0;

    $(function(){
        setDocsize();
        allthumbs = $('.thumb');
        $(window).resize(function(){setDocsize();});
    	allthumbs.click(function(){initShowroom(this);return false;});
    });

    function setDocsize() {docsize[0] = $(document).width();docsize[1] = $(window).height();}
        
	function initShowroom(img_a)
		{
		var uid = new Date().getTime();
    	$('#img_tester').remove();
        $('body')
          .append('<div class="showroom"><a class="close" href="javascript:;" onclick="hideShowroom();"></a><div><img id="'+uid+'" src="" /></div><div class="navi"><a href="javascript:;" onclick="prev_img('+uid+');"><<<</a> <a href="javascript:;" class="autoplaybtn" onclick="autoplay('+uid+');">stop<\/a> <a href="javascript:;" onclick="next_img('+uid+');">>>><\/a></div></div>')
    	  .append('<div class="shadowscreen" style="height:'+docsize[1]+'px;"></div>')
    	  .append('<div id="img_tester"></div>');




        $('#'+uid).load(function()
            {
            $('#'+uid).removeAttr("width").removeAttr("height");
            var copyimg = $('#'+uid).clone();
            $('#img_tester').empty().append(copyimg);
            copyimg.removeAttr('height');
            copyimg.removeAttr('width');
            var rw=copyimg.width();var rh=copyimg.height();displayShowroom(this,rw,rh);
            });
        $('#'+uid).attr("src",$(img_a).attr("href"));

        current_img = allthumbs.index($(img_a));
        autoplay(uid);
		}

    function displayShowroom(img,w,h)
    	{
        if(w>1300) {$(img).css({'height':h+'px','width':'auto'});w=1200;h+=15;}
    	else if(h>700) {h=700;$(img).css({'height':'auto','width':w+'px'});w+=15;}
	    $('.showroom').css({'top':parseInt((docsize[1]-h)/2)+'px', 'left':parseInt((docsize[0]-w)/2)+'px','opacity':'1.0'});
        $('.showroom div:not(.navi)')
	      .css({'margin-left':parseInt(w/2)+'px','margin-top':parseInt(h/2)+'px','height':'0px','width':'0px'})
          .animate({'width':w,'height':h,"marginTop":0,"marginLeft":0},450,function(){$('.showroom a.close,.showroom .navi').show();$('.shadowscreen').fadeIn(400);});
    	$('.shadowscreen').click(function(){hideShowroom();});
        }

    function gracefulImageShow(img,w,h)
    	{
        if(w>1300) {$(img).css({'height':h+'px','width':'auto'});w=1200;h+=15;}
    	else if(h>700) {h=700;$(img).css({'height':'auto','width':w+'px'});w+=15;}
	    $('.showroom').animate({'top':parseInt((docsize[1]-h)/2)+'px', 'left':parseInt((docsize[0]-w)/2)+'px'});
        $('.showroom div:not(.navi)').animate({'width':w,'height':h,"marginTop":0,"marginLeft":0},450);
        }

    function prev_img(uid)
        {
        if(ap>0)
            {
            $('.autoplaybtn').html("start");
            window.clearInterval(ap);
            ap=0;
            }

        current_img--;
        if(current_img<0) current_img=allthumbs.length-1;

        $('#'+uid).unbind("load").load(function()
            {
            $(this).removeAttr("width").removeAttr("height");
            var copyimg = $(this).clone();
            $('#img_tester').empty().append(copyimg);
            copyimg.removeAttr('height');
            copyimg.removeAttr('width');        
            var rw=copyimg.width();var rh=copyimg.height();gracefulImageShow(this,rw,rh);
            });
        $('#'+uid).attr('src',allthumbs.eq(current_img).attr("href"));
        }

    function next_img(uid,keep_autoplay)
        {
        if(ap>0 && !keep_autoplay)
            {
            $('.autoplaybtn').html("start");
            window.clearInterval(ap);
            ap=0;
            }

        current_img++;
        if(current_img>=allthumbs.length) current_img=0;

        $('#'+uid).unbind("load").load(function()
            {
            
            $(this).removeAttr("width").removeAttr("height");
            var copyimg = $(this).clone();
            $('#img_tester').empty().append(copyimg);
            copyimg.removeAttr('height');
            copyimg.removeAttr('width');        
            var rw=copyimg.width();var rh=copyimg.height();gracefulImageShow(this,rw,rh);
            });

        $('#'+uid).attr('src',allthumbs.eq(current_img).attr("href"));
        }


    function autoplay(uid)
        {
        if(ap>0)
            {
            $('.autoplaybtn').html("start");
            window.clearInterval(ap);
            ap=0;
            }
        else
            {
            $('.autoplaybtn').html("stop");
            ap=window.setInterval("next_img("+uid+",true)",3000);
            }
        }


    function hideShowroom()
    	{
    	$('.shadowscreen').fadeOut(200,function(){$('.shadowscreen').remove();});
    	$('.showroom a,.showroom .navi').hide();
        $('#img_tester').remove();
    	$('.showroom div').animate({'marginLeft':$('.showroom div').width()/2,'marginTop':$('.showroom div').height()/2,'width':0,'height':0},500,function(){$('.showroom').remove();});
    	}