/**
 * Javascript Handler
 * Write Down by Daniel Simangunsong
 * Code Name - BugsFire
 * Powered by JQuery
/**/

$(document).ready(function(){
    if($('.anima_container').length > 0){
        
        $('a.anima_more').click(function(e){
            var link_index = $(this).attr('linek');
            var boxid = $('.anima_box.box_'+link_index).attr('id');
            var link  = $(this).attr('href');
            
            if (boxid=='big') {
                return true;
                //window.location.href = link;    
            }else{                
                e.preventDefault();
            }
        });
        var blockclick = false;    
        var normalwidth = parseInt(229);
        var normalheight = parseInt(253);
        var smallwidth = parseInt((normalwidth*2-10)/3);
        var bigwidth = normalwidth*2+10;    
        var place_holder    = $('.anima_container').position();
        var holdertop       = place_holder.top;
        var holderleft      = place_holder.left;
        
        function reset() { // Reset Function
            $('.contentplus').hide(); // Hide big content, and display the small box_1.
            $('.anima_box.box_1').css({ top:holdertop,left: holderleft });
            $('.anima_box.box_2').css({ top:holdertop,left: holderleft+normalwidth+11 });
            $('.anima_box.box_3').css({ top:holdertop,left: holderleft+normalwidth*2+22 });
            $('.anima_box.box_4').css({ top:holdertop+normalheight+13,left: holderleft });
            $('.anima_box.box_5').css({ top:holdertop+normalheight+13,left: holderleft+normalwidth+11 });
            $('.anima_box.box_6').css({ top:holdertop+normalheight+13,left: holderleft+normalwidth*2+22 });
            $('.anima_box.box_1 .big').hide();$('.anima_box.box_1 .small').show();
            $('.anima_box.box_2 .big').hide();$('.anima_box.box_2 .small').show();
            $('.anima_box.box_3 .big').hide();$('.anima_box.box_3 .small').show();
            $('.anima_box.box_4 .big').hide();$('.anima_box.box_4 .small').show();
            $('.anima_box.box_5 .big').hide();$('.anima_box.box_5 .small').show();
            $('.anima_box.box_6 .big').hide();$('.anima_box.box_6 .small').show();
        }  
                
        function resizeWindow( e ) {  
            place_holder = $('.anima_container').position();
            holdertop = place_holder.top;
            holderleft = place_holder.left;
            
            reset();
        } 
        //If the User resizes the window, adjust the #container height
        $(window).bind("resize", resizeWindow);
        
        $('.anima_box.box_1').animate({ top:holdertop,left: holderleft });
        $('.anima_box.box_2').animate({ top:holdertop,left: holderleft+normalwidth+11 });
        $('.anima_box.box_3').animate({ top:holdertop,left: holderleft+normalwidth*2+22 });
        $('.anima_box.box_4').animate({ top:holdertop+normalheight+13,left: holderleft });
        $('.anima_box.box_5').animate({ top:holdertop+normalheight+13,left: holderleft+normalwidth+11 });
        $('.anima_box.box_6').animate({ top:holdertop+normalheight+13,left: holderleft+normalwidth*2+22 });
        
        $('.anima_box').click(function(){
            var clicked     = $(this).attr('box');
            var animate     = $(this).attr('active');
            var $this       = $('.anima_box.box_'+clicked);
            var idbox       = $this.attr('id');
            
            if (animate == 'disable') { return true; }
            if (idbox == 'big') {
                return true; // Don't do anything if have been clicked   
            }            
            
            if (blockclick != true) {
                blockclick = true;
                
                $('.anima_box').removeAttr('id'); // First let remove big container id            
                $this.attr('id','big'); // Add attribute id to the current box.
                
                $('.anima_box .contentplus').css('display','none').removeAttr('id');
                $('.anima_box.box_'+clicked+' .contentplus').attr('id','active');
                var $BigContentContainer = $('.anima_box .contentplus#active');
                
                //$('#titlehtml').html(clicked); // Set Our HTML Title 
               
                if (clicked == '1') {
                    reset();
                    $('.anima_box.box_1 .small').hide();
                    $('.anima_box.box_1 .big').show();
                    
                    $('.anima_box.box_4').animate({width: smallwidth},100,function(){}).attr('id','small');
                    $('.anima_box.box_5').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_5').animate({
                                top:holdertop+normalheight+13,left:holderleft+smallwidth+10},200);
                    }).attr('id','small');  
                    
                    $('.anima_box.box_2').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_2').animate({
                            top:holdertop+normalheight+13,left:holderleft+smallwidth*2+20},200
                        );
                    }).attr('id','small');
                    
                    $this.animate({ width: bigwidth, height: normalheight},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_3').css({width: normalwidth});
                    $('.anima_box.box_6').css({width: normalwidth});
                    /**/
                }
                
                if (clicked == '2'){
                    reset();
                    $('.anima_box.box_2 .small').hide();
                    $('.anima_box.box_2 .big').show();
                    
                    $('.anima_box.box_5').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_5').animate({
                                top:holdertop+normalheight+13,left:holderleft+smallwidth*2+20
                            },100).attr('id','small');
                            
                            $('.anima_box.box_4').animate({ width: smallwidth},100,function(){
                                $('.anima_box.box_4').animate({
                                    top:holdertop+normalheight+13,left:holderleft+smallwidth+10},200).attr('id','small');
                            });
                                   
                        }
                    ).attr('id','small');
                            
                    $('.anima_box.box_1').animate({ width: smallwidth},100,function(){
                        $('.anima_box.box_1').animate({
                            top:holdertop+normalheight+13,left:holderleft},200).attr('id','small');
                    }).attr('id','small');
                    $this.css({top: holdertop, left: holderleft}).animate({ width: bigwidth, height: 252},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_3').css({width: normalwidth});
                    $('.anima_box.box_6').css({width: normalwidth}); 
                }
                
                if (clicked == '3') {
                    reset();
                    $('.anima_box.box_3 .small').hide();
                    $('.anima_box.box_3 .big').show();
                    
                    $('.anima_box.box_6').animate({width: smallwidth},100,function(){
                        $('.anima_box.box_6').animate(
                            { top:holdertop+normalheight+13, left: holderleft+normalwidth+smallwidth*2+30 }, 100 
                        );
                    }).attr('id','small');
                    $('.anima_box.box_5').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_5').animate({
                                top:holdertop+normalheight+13,left:holderleft+normalwidth+smallwidth+20},200);
                    }).attr('id','small');
                    
                    $('.anima_box.box_2').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_2').animate({
                            top:holdertop+normalheight+13,left:holderleft+normalwidth+10},200
                        );
                    }).attr('id','small');
                    
                    $this.animate({top:holdertop,left:holderleft+normalwidth+10},100).animate({ width: bigwidth, height: normalheight},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_1').css({width: normalwidth});
                    $('.anima_box.box_4').css({width: normalwidth});
                }
                
                if (clicked == '4') {
                    reset();
                    $('.anima_box.box_4 .small').hide();
                    $('.anima_box.box_4 .big').show();
                    
                    $('.anima_box.box_1').animate({width: smallwidth},100,function(){
                    
                        $('.anima_box.box_2').animate({width: smallwidth},100,function(){ 
                            $('.anima_box.box_2').animate({
                                top:holdertop,left:holderleft+smallwidth+10},200,function(){
                                    
                                }
                            );
                        }).attr('id','small');
                    }).attr('id','small');
                    
                    $('.anima_box.box_5').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_5').animate({
                                top:holdertop,left:holderleft+smallwidth*2+20},200);
                    }).attr('id','small');
                    
                    $this.animate({top:holdertop+normalheight+13,left:holderleft},100).animate({ width: bigwidth, height: normalheight},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_3').css({width: normalwidth});
                    $('.anima_box.box_6').css({width: normalwidth});
                }
                
                if (clicked == '5') {
                    reset(); 
                    $('.anima_box.box_5 .small').hide();
                    $('.anima_box.box_5 .big').show();
                    
                    $('.anima_box.box_2').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_2').animate({
                            top:holdertop,left:holderleft+smallwidth*2+20},200
                        );
                    }).attr('id','small');
                    
                    $('.anima_box.box_1').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_1').animate({
                                top:holdertop,left:holderleft+smallwidth+10},200);
                    }).attr('id','small');  
                    
                    $('.anima_box.box_4').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_4').animate({
                            top:holdertop,left:holderleft},200
                        );
                    }).attr('id','small');
                    $this.animate({top:holdertop+normalheight+13,left:holderleft},100).animate({ width: bigwidth, height: normalheight},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_3').css({width: normalwidth});
                    $('.anima_box.box_6').css({width: normalwidth});
                }
                
                if (clicked == '6') {
                    reset(); 
                    $('.anima_box.box_6 .small').hide();
                    $('.anima_box.box_6 .big').show();
                    
                    $('.anima_box.box_3').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_3').animate({
                            top:holdertop,left:holderleft+normalwidth+smallwidth*2+30},200
                        );
                    }).attr('id','small');
                    
                    $('.anima_box.box_2').animate({width: smallwidth},100,
                        function(){
                            $('.anima_box.box_2').animate({
                                top:holdertop,left:holderleft+normalwidth+smallwidth+20},200);
                    }).attr('id','small'); 
                    
                    $('.anima_box.box_5').animate({width: smallwidth},100,function(){ 
                        $('.anima_box.box_5').animate({
                            top:holdertop,left:holderleft+normalwidth+10},200
                        );
                    }).attr('id','small');
                    $this.animate({top:holdertop+normalheight+13,left:holderleft+normalwidth+10},100).animate({ width: bigwidth, height: normalheight},1000,function(){
                        $BigContentContainer.show(500,function(){blockclick = false;});
                    });
                    $('.anima_box.box_1').css({width: normalwidth});
                    $('.anima_box.box_4').css({width: normalwidth});
                }
            }
        });
    };
});