var box = {
    _marginTop: 237,    // Kutuların varsayılan üst mesafesi
    _defaultSizes: {
        nor: { width: 234, height: 148 },   // Kutuların varsayılan normal boyutları
        pop: { width: 340, height: 280}    // kutuların varsayılan açılmış boyutları
    }
}

box.boxes = {
    hotmail: {
        sizes: box._defaultSizes,
        margins: { marginTop: box._marginTop, marginLeft: 50 }
    },
    messenger: {
        sizes: box._defaultSizes,
        margins: { marginTop: box._marginTop, marginLeft: 373 }
    },
    essentials: {
        sizes: box._defaultSizes,
        margins: { marginTop: box._marginTop, marginLeft: 696 }
    },
    GetPopMargins: function(boxName) {
        var wf = (box.boxes[boxName].sizes.pop.width - box.boxes[boxName].sizes.nor.width) / 2;
        var hf = (box.boxes[boxName].sizes.pop.height - box.boxes[boxName].sizes.nor.height) / 2;
        return {
            marginTop: box.boxes[boxName].margins.marginTop - hf,
            marginLeft: box.boxes[boxName].margins.marginLeft - wf
        }
    }
}

box.Collapse = function(boxObj) {
    var boxName = boxObj.attr('name');
    //alert('collapse ' + boxName);
    var anim = {};
    
    $.extend(anim, box.boxes[boxName].sizes.nor);
    $.extend(anim, box.boxes[boxName].margins);
    boxObj.attr('state', '0').stop().animate(anim, box.AnimUpDown);
    boxObj.children('.box').stop().animate({ backgroundPositionY: 50 });
    boxObj.find('.text').stop().animate({ 'margin-top': 200, opacity: 0 });

    $('.pop.' + boxName)
        .stop()
        .animate({
            left: boxObj.offset().left + (boxObj.width() / 2),
            top: box._marginTop + (boxObj.height() / 2),
            width: 0,
            height: 0
        });


    $('.boxContainer').css({
        'background-position': 'bottom center',
        'filter': ""
    });
}

box.CollapseAll = function(boxObj) {
    $('.boxContainer').each(function() {
        //alert($(this).attr('state') + " / " + $(this).attr('name'));
        //alert($(this).attr('name'));
        if (
            $(this).attr('name') != boxObj.attr('name') &&
            $(this).attr('state') == '1'
        ) box.Collapse($(this));

    });
}


box.Expand = function(boxObj) {
    box.CollapseAll(boxObj);
    var boxName = boxObj.attr('name');
    //alert('expand ' + boxName);
    var anim = {};
    $.extend(anim, box.boxes[boxName].sizes.pop);
    $.extend(anim, box.boxes.GetPopMargins(boxName));
    boxObj.attr('state', '1').stop().animate(anim);
    boxObj.children('.box').stop().animate({ backgroundPositionY: 10 });
    boxObj.find('.text').stop().animate({ 'margin-top': 100, opacity: 1 });
    $('.pop.' + boxName).stop().show().animate({
        width: 470,
        height: 370,
        top: box._marginTop - 70,
        left: (boxObj.offset().left + (boxObj.width() / 2)) - (470 / 2)
    });
}

//var parentBox = $(this);
//$('<img>').addClass('popImage').click(function() { parentBox.click(); }).attr({ src: '/resource/image/windows-live-messenger-pop.png' })
//            .css({ zIndex: 10, position: 'absolute', width: 0, height: 0, left: $(this).offset().left + 100, top: $(this).offset().top + 150 })
//            .insertAfter($(this))


box.AnimUpDown = function() {
    // Kutuları aşağı-yukarı sallandırır
    var duration = 1000;
    $(this).animate({ marginTop: box._marginTop - 10 }, duration, function() { $(this).animate({ marginTop: box._marginTop }, duration, box.AnimUpDown) })
}

box.initBox = function(boxName) {
    // Kutuyu animasyonla başlangıç noktasına getir
    //alert('initBox ' + boxName);
    boxObj = $(".boxContainer." + boxName);
    $(boxObj)
        .attr('state', '0')
        .css({ marginLeft: box.boxes[boxName].margins.marginLeft, marginTop: 0, display: 'block' })
        .css(box.boxes[boxName].sizes.nor)
        .stop()
        .animate({}, 1, box.AnimUpDown)
        .animate({ marginTop: box.boxes[boxName].margins.marginTop });


    $('.pop.' + boxName)
        .stop()
        .css({
            left: boxObj.offset().left + (boxObj.width() / 2),
            top: box._marginTop + (boxObj.height() / 2)
        })
    //.children('.box').css(box.boxes[boxName].sizes.nor);
    //box.Expand(boxObj);
    //box.CollapseAll(null);
};


box.Initialize = function() {
    var delay = 0;
    //alert('box.Initialize');
    $('.boxContainer').attr('state', '0').each(function() {
        boxName = $(this).attr('name');
        setTimeout("box.initBox('" + boxName + "')", delay);
        delay += 100;
    })
    .unbind()
    .click(function() {
        return;
        //alert('CLICK ' + $(this).attr('state'));
        name = $(this).attr('name');
        if ($(this).attr('state') == '1') {
            //alert('COLLAPSE ' + name);
            box.Collapse($(this));
        } else {
            //alert("EXPAND " + name);
            box.Expand($(this));
        }
    }
    )
    .mouseover(function() {
        if ($(this).attr('state') == '0')
            box.Expand($(this));
    }).mouseout(function() {
        //return false;
        //box.Collapse($(this).attr('state', '0'));
    })
    .find('.text').css('opacity', 0)
    ;

    $('.pop').unbind('click').click(function() {
        $('.pop').unbind();
        $('.boxContainer').unbind();
        name = $(this).attr('name');
        boxObj = $('.boxContainer.' + name);
        box.Collapse(boxObj);
        box.Destroy(function() {
            page.Initialize(name);

        });
    });

}

box.Destroy = function(func) {
    $('.boxContainer').stop(true).css('background-image', 'url()').animate({
        marginLeft: '-=100px', opacity: 0
    }, function() {
        $(this).remove();
        if (func) { func(); func = undefined; }
    });
}