/// <reference name="MicrosoftAjax.js" />
/// <reference path="jquery-1.3.2-vsdoc2.js" />
/// <reference path="common.js" />
/// <reference path="EICv3.js" />

eic.Boxes = function() {

    var draggarea = $('#draggarea');
    var descriptionArea = $('#imgDescription');
    var titleArea = $('#imgTitle');
    var boxes = draggarea.find('.imageBox');
    var draggareaHeight = (Math.ceil(boxes.length / 3)) * 188;

    if (boxes.length > 6) {
        draggarea.height(draggareaHeight);
    }

    var boxStatus = [];
    var paddingTop = (draggarea.innerWidth() - draggarea.width()) / 2;
    var paddingLeft = (draggarea.innerHeight() - draggarea.height()) / 2;

    var aspectRatio = 1.2569;

    var getBoxCss = function(sender) {

        var pos = sender.position();

        return { left: pos.left, top: pos.top, width: sender.width(), height: sender.height() };
    };

    var GetBoxOnTop = function(sender) {

        boxes.each(function(i) {

            if (this.style.zIndex == 99) {
                this.style.zIndex = i + 3;
            }

            if (this.id == sender.id) {
                sender.style.zIndex = boxes.length + 3;
            }
            else {
                if (this.style.zIndex > 3) {
                    this.style.zIndex--;
                }
                else {
                    this.style.zIndex = 3;
                }
            }
        });
    };

    var isZooming = false;

    var zoomBox = function(sender) {
        if (!isZooming) {
            isZooming = true;
            var id = sender.id;
            sender = $(sender);

            var width = draggarea.width() - (sender.outerWidth() - sender.width());

            if (boxStatus[id].max) {
                sender.animate(boxStatus[id].css);
                sender.find('img').animate({ height: (boxStatus[id].css.height - 28) });
                boxStatus[id].max = false;
                isZooming = false;
            }
            else {

                boxStatus[id] = { max: true, css: getBoxCss(sender) };

                var newTop = sender.position().top;

                if (newTop < 188) {
                    newTop = paddingTop;
                }
                else if (newTop > draggareaHeight - 493) {
                    newTop = draggareaHeight - 500;
                }
                else {
                    newTop -= 188;
                }

                sender.css({ zIndex: 99 }).animate({ left: paddingLeft, top: newTop, width: width + 'px', height: '493px' }, function() { isZooming = false; });
                sender.find('img').animate({ height: '468px' });
            }
        }
        return false;
    };

    boxes.resizable({
        aspectRatio: aspectRatio,
        minHeight: 177,
        minWidth: 207,
        maxHeight: 493,
        maxWidth: 694,
        containment: '#draggarea',
        start: function() { GetBoxOnTop(this); boxStatus[this.id].max = false; },
        //end: function() { alert('width: ' + boxes.width() + ', height: ' + boxes.height()); },
        resize: function(event, ui) { /*$(this).height($(this).find('img').height() + 28);*/$(this).find('img').height($(this).height() - 28); }
    }).draggable({
        containment: '#draggarea',
        start: function() { GetBoxOnTop(this); },
        stack: { group: '.imageBox', min: 3 }
    }).each(function() {
        var sender = $(this);
        var id = this.id;
        boxStatus[id] = { max: false, css: getBoxCss(sender) };

        window.setTimeout(function() {
            sender.css(boxStatus[id].css);
            sender.css({ position: 'absolute' });
        }, 10);
    }).click(function() {
        GetBoxOnTop(this);
        descriptionArea.html($(this).find('.desc').html());
        titleArea.html($(this).find('.title').html());
        return false;
    }).dblclick(function() {
        return zoomBox(this);
    }).find('.ico2').click(function() {
        var parent = $(this).closest('.imageBox');

        GetBoxOnTop(parent[0]);
        descriptionArea.html(parent.find('.desc').html());
        titleArea.html(parent.find('.title').html());


        return zoomBox(parent[0]);
    });
    $('#draggarea .imageBox img').height($('#draggarea .imageBox img').parent().height() - 28);

};



$('#ulPages li').each(function(i) {
    var IsPostBack = false;
    $(this)[0].onclick = function() {
        $('#ulPages li').removeClass('off');
        $(this).addClass('off');
        $('.pageArea').hide();
        $('.pageArea:eq(' + i + ')').show();

        $('#tabName').html(tabsName[i]);

        if (i == 1 && !IsPostBack) {
            IsPostBack = true;
            window.setTimeout(function() { eic.Boxes(); }, 1);
        }

        //window.setTimeout(function() { $('.mask-img img').centerImage(); }, 10);

        return false;
    };
});

$('.mask-img img:eq(0)').centerImage();