var glob_id = false;

$(document).ready(function() {

    var CountImageBoxes=0;
    $('.ImageBoxClick').each(function(i) {
        if (ImageBoxes[this.id]) {
            ImageBoxes[this.id].index = CountImageBoxes;
            CountImageBoxes++;
        }
    });
    
    $('.ImageBoxClick').bind('click', function() {
        var photo = new Image();
        var blackBack = '<div class="ImageBoxBackground"></div>';
        if (glob_id) {
            var id = glob_id;
        } else {
            var id = $(this).attr('id');
            $('body').prepend(blackBack);
	    $('.ImageBoxBackground').css('background-image', 'url(images/imagebox/loader.gif)');
        }
        $(photo).load(function () {
            
            var show_prev = ImageBoxes[id]['index']==0?false:true;
            var show_next = ImageBoxes[id]['index']+1==CountImageBoxes?false:true;
            
            $('body').prepend('\
<div class="ImageBox" style="width:'+(photo.width+10)+'px;">\
    <div class="ImageBox-head">\
        <div class="ImageBox-image-insert">\
            <table id="navigation"><tr>\
                '+(show_prev?'<td class="ImageBox-top-prev"><img src="images/imagebox/left.gif" width="14" height="12" alt="Назад" /></td>':'<td style="width:25px;"></td>')+'\
                <td class="ImageBox-top-img"></td>\
                '+(show_next?'<td class="ImageBox-top-next"><img src="images/imagebox/right.gif" width="14" height="12" alt="Вперёд" /></td>':'<td style="width:25px;"></td>')+'\
            </tr></table>\
            <div class="ImageBox-image" style="height:'+photo.height+'px;"><img src="'+ImageBoxes[id]['img']+'" width="'+photo.width+'" height="'+photo.height+'" alt="'+ImageBoxes[id]['name']+'" /></div>\
        </div>\
        <div class="ImageBox-infoWindow"><div class="ImageBox-infoWindow-close"><img src="images/imagebox/close.gif" width="18" height="16" alt="Закрыть" /></div>'+ImageBoxes[id]['info']+'</div>\
    </div>\
    <div class="ImageBox-info">\
        <div class="ImageBox-desc">\
            <div class="ImageBox-name"></div>\
            <div class="ImageBox-url"><input type="text" name="current_photo_url" value="" readonly="readonly" /></div>\
	    <div class="ImageBox-text"></div>\
	    <div class="ImageBox-tags"></div>\
        </div>\
        <div class="ImageBox-num">Фото <span>'+(ImageBoxes[id]['index']+1)+'</span> из <span>'+CountImageBoxes+'</span></div>\
        <div class="ImageBox-btns">\
            '+(ImageBoxes[id]['info']?'<img class="ImageBox-btns-info" src="images/imagebox/info.gif" width="18" height="16" alt="Инфо" />':'')+'\
            '+(ImageBoxes[id]['print']?'<img class="ImageBox-btns-print" src="images/print.gif" width="18" height="16" alt="Ïå÷àòü" />':'')+'\
            <img class="ImageBox-btns-close" src="images/imagebox/close.gif" width="18" height="16" alt="Закрыть" />\
            <div class="ImageBox-clear"></div>\
        </div>\
        <div class="ImageBox-clear"></div>\
    </div>\
</div>');

            
            var ImageBoxWidth = $('.ImageBox').width();
            
            $('.ImageBox-name').css({width: ImageBoxWidth - 18});
            $('.ImageBox-text').css({width: ImageBoxWidth - 18});
            $('.ImageBox-name').html(ImageBoxes[id]['name']);
            $('.ImageBox-text').html(ImageBoxes[id]['text']);

	    // photo url
	    if ('frontend' == ENV) {
		$('.ImageBox-url input[name=current_photo_url]')
		    .val($('input[name=url]').val() + '#' + id);
		$('input[name=current_photo_url]').one('click',
		    function() {$(this).select();});
	    } else {
		$('.ImageBox-url').remove();
	    }

	    
	    // append tags
	    if (undefined != tags[id]) {
		var tags_current = new Array();
		$('.ImageBox-tags').html('<strong>Теги:</strong> ');
		for (i = 0; i < tags[id].length; i++) {
		    if ('frontend' == ENV) {
			var tag = document.createElement('a');
			tag.setAttribute('href', 'tag/' + tags[id][i]['id'] + '.html');
			$(tag).text(tags[id][i]['name']);
		    } else {
			var tag = document.createElement('span');
			$(tag).text(tags[id][i]['name']);
		    }
		    tags_current[i] = tag;
		    if (i > 0) {
			$('.ImageBox-tags').append(', ');
		    }
		    $('.ImageBox-tags').append(tag);
		}
	    }
	    

            
            var ImageBoxHeight = $('.ImageBox').height();
	    
            var ImageBox_left = ($(document).width()/2) - (ImageBoxWidth/2);
            var ImageBox_top = ($(window).height()/2 + $(window).scrollTop()) - (ImageBoxHeight/2);
            $('.ImageBox').css({left: ImageBox_left, top: ImageBox_top});
            
            var top_img = new Image();
            $(top_img).load(function () {
                $('.ImageBox-top-img').html('<img src="'+top_img.src+'" width="'+top_img.width+'" height="'+top_img.height+'" alt="" />');
            }).error().attr('src', ImageBoxes[id]['top_img']);
            
            $('.ImageBox-btns-close,.ImageBoxBackground').click(function () {
                var ImageBoxWnd = $('.ImageBox');
                ImageBoxWnd.fadeOut('fast', function(){
                    $(this).remove();
                });
                $('.ImageBoxBackground').remove();
                glob_id = false;
            });
            
            $('.ImageBox-top-prev').click(function(){
                $.each(ImageBoxes, function(i) {
                    if(ImageBoxes[i].index + 1 == ImageBoxes[id]['index']) {
                        glob_id = i;
                        var ImageBoxWnd = $('.ImageBox');
                        ImageBoxWnd.remove();
                        //$('.ImageBoxBackground').css('background-image', 'url(images/imagebox/loader.gif)');
                        $('.ImageBoxClick').click();
                    }
                });
                
            });
            
            $('.ImageBox-top-next').click(function(){
                $.each(ImageBoxes, function(i) {
                    if(ImageBoxes[i].index - 1 == ImageBoxes[id]['index']) {
                        glob_id = i;
                        var ImageBoxWnd = $('.ImageBox');
                        ImageBoxWnd.remove();
                        //$('.ImageBoxBackground').css('background-image', 'url(images/imagebox/loader.gif)');
                        $('.ImageBoxClick').click();
                    }
                });
                
            });
            
            $('.ImageBox-btns-info').click(function(){
                $('.ImageBox-infoWindow').fadeIn();
            });
            
            $('.ImageBox-infoWindow-close').click(function(){
                $('.ImageBox-infoWindow').fadeOut();
            });
            
            $('.ImageBox-btns-print').click(function(){
                window.open(ImageBoxes[id]['print'], ImageBoxes[id]['name'], "toolbar=no,menubar=no,width=800,height=700,resizable=no");
            });
            
            $('.ImageBox').css({display:'none', visibility:'visible'});
            $('.ImageBox').fadeIn('normal');
        }).error(function () {
            alert('Фото отсутствует');
            $('.ImageBoxBackground').remove();
            // notify the user that the image could not be loaded
        }).attr('src', ImageBoxes[id]['img']);
        
        return false;
    });


    $('.ImageBoxClick').each(function() {
	if (('#' + $(this).attr('id')) == document.location.hash) {
	    $(this).click();
	}
    });

});



$(window).bind('resize', function() {
    if ($('.ImageBox')) {
        var ImageBox_left = ($(document).width() / 2) - ($('.ImageBox').width() / 2);
        var ImageBox_top = ($(document).height() / 2) - ($('.ImageBox').height() / 2);
        $('.ImageBox').css({
            left: ImageBox_left,
            top: ImageBox_top
        });
    }
});