$(function() {
   /* object to save the initial positions of each box */
   var divinfo = {"initial": []};

   /* index of the selected / clicked box */
   var current = -1;

   /* we save the index,top and left of each one of the boxes */
   $('#littleBoxes > div').each(function(){
      var $this = $(this);
      var initial = {
           'index' : $this.index(),
           'top'   : $this.css('top'),
           'left'  : $this.css('left')
      };
      divinfo.initial.push(initial);
   });

   $('#expandMapLink').bind('click',function(e){
	window.open("http://maps.google.com/maps?hl=en&client=firefox-a&ie=UTF8&q=mezcalitos+cantina&fb=1&gl=us&hq=mezcalitos+cantina&hnear=Atlanta,+GA&view=map&cid=11010385410264584712&ll=33.760186,-84.303761&spn=0.006295,0.006295&source=embed");
   });


   // Link to External Apps rather than embedding...
   var gmap = 'http://maps.google.com/maps?hl=en&client=firefox-a&ie=UTF8&q=mezcalitos+cantina&fb=1&gl=us&hq=mezcalitos+cantina&hnear=Atlanta,+GA&view=map&cid=11010385410264584712&ll=33.760186,-84.303761&spn=0.006295,0.006295&output=embed';
   var gmapExt = 'http://maps.google.com/maps?hl=en&client=firefox-a&ie=UTF8&q=mezcalitos+cantina&fb=1&gl=us&hq=mezcalitos+cantina&hnear=Atlanta,+GA&view=map&cid=11010385410264584712&ll=33.760186,-84.303761&spn=0.006295,0.006295&output=embed';

   var ua = navigator.userAgent;
   if((ua.match(/iPhone/i)) || (ua.match(/iPod/i)) || (ua.match(/windows ce/i)) || (ua.match(/android/i)) ) {
	$('#mapLink').addClass('externalLink').attr('href',gmapExt);
   } else {
	$('#Map_box').append('<iframe id="gmap" width="400" height="330" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;client=firefox-a&amp;ie=UTF8&amp;q=mezcalitos+cantina&amp;fb=1&amp;gl=us&amp;hq=mezcalitos+cantina&amp;hnear=Atlanta,+GA&amp;view=map&amp;cid=11010385410264584712&amp;ll=33.760186,-84.303761&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>');
   }

   //$('#littleBoxes a.option').addClass('normalBox');
   $('#littleBoxes a.option').not('.externalLink').bind('click',function(e){
         var $this = $(this);
         var $currentBox    = $this.parent();
         
         /* set a z-index lower than all the other boxes, to see the other boxes animation on the top*/
         $currentBox.css('z-index','1');

         /* if we are clicking on a expanded box : */
         if(current == $currentBox.index()){
                  /* put it back (decrease width,height, and set the top and left like it was before).
                     the previous positions are saved in the divinfo obj*/
             $currentBox.stop().animate({
                                    'top'         : divinfo.initial[$currentBox.index()].top,
                                    'left'        : divinfo.initial[$currentBox.index()].left,
                                    'width'     : '90px',
                                    'height'    : '90px'
             },800,'easeOutBack').find('.boxcontent').fadeOut();
	     $(this).removeClass('expandedBox');
             $('#littleBoxes > div').not($currentBox).each(function(){
                 var $ele         = $(this);
                 var elemTop     = divinfo.initial[$ele.index()].top;
                 var elemLeft     = divinfo.initial[$ele.index()].left;
                 $ele.stop().show().animate({
                                    'top'         : elemTop,
                                    'left'        : elemLeft,
                                    'opacity'    : 1
                                },800);
                 });
                 current = -1;
              }
              
              /* if we are clicking on a small box : */
                        else{
                            /* randomly animate all the other boxes.
                            Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
                            This range is considering the initial lefts/tops of the elements. It's not the exact right
                            range, since we would have to calculate the range based on each one of the boxes. Anyway, it
                            fits our needs...
                            */
                            $('#littleBoxes > div').not($currentBox).each(function(){
                                var $ele = $(this);
                                $ele.stop().animate({
                                    'top' : (Math.floor(Math.random()*601) - 150) +'px',
                                    'left': (Math.floor(Math.random()*601) - 150) +'px',
                                    'opacity':0
                                },800,function(){
                                    $(this).hide();
                                });
                            });


							//alert($(this).css('line-height'));

                            /* expand the clicked one. Also, fadeIn the content (boxcontent)
                            if you want it to fill the space of the littleBoxes container,
                            then these are the right values */
                            var newwidth     = 569;
                            var newheight     = 379;
                            $currentBox.stop().animate({
                                'top'     : '0px',
                                'left'    : '-95px',
                                'width' : newwidth +'px',
                                'height': newheight+'px'
                            },800,'easeOutBack',function(){
                                current = $currentBox.index();
                                $(this).find('.boxcontent').each(function(){
                                   $(this).fadeIn().css('color','black');
                                });

                            });
                            $(this).addClass('expandedBox');
                        }
                        e.preventDefault();
                });
});