function orangebubbles(){
    //calculating random color of dream    
    mainbubble = $('<div class="mainbubble" id="orange">').hide();
    //appending it to body
     $('div#bubbles').append(mainbubble);
     //styling dream.. filling colors.. positioning.. showing.. growing..fading
    $("#orange").css({
      'height': '10px','width': '10px',opacity: .1,top: 32,left: 855
    }).show().animate({
      'height':'86px','width':'86px',opacity: 1,top: 12,left: 835
      }, 1000, 
        function() { 
          $("#orange").animate({'height':'72px','width':'72px'}, 500,
            function() {
                $("<span><img style='display: block;width: 47px;left:12px;top:-2px;position: relative;' src='http://34f292dd2c21653e268badc8f351aa75712af0ae.gripelements.com/img/orange_text.png' alt='a new honor for the new year' /> </span>").hide().appendTo('#orange'), $('span').fadeIn(1000);
              }
          ); //closes animate 
        }
      ); //closes animate
      
      setTimeout(
        function() {
          bluebubbles();
        }, 1800
      );
      
      $("#orange").hover(function() {
          $(this).css({'z-index' : '10'});
          $(this).addClass("hover").animate({'background-color':'#ea9f50'}, 140);
          } , function() {
            $(this).css({'z-index' : '0'});
            $(this).removeClass("hover")
              .animate({'background-color':'#e67f00'}, 140);
          }
      );

}


function dots_orange(a,b){
  var dotCounter = 0;
  
  function addDot() {
    setTimeout(function() {
      if (dotCounter++ < 16) {
        $('.streamer1').append('<div class="dot" id="'+a+'_orange"> </div>');
         //styling dream.. filling colors.. positioning.. showing.. growing..fading
        $("#"+a+"_orange").css({height: 0, width: 0, opacity: 0, top: b * (b/6), right: a}).show()
        .animate({height:0, width:0, opacity: .8}, 1300);
        addDot();
        a += 7;
        b += 1;
      }
    }, 30);
  }
  addDot();
}

function dots_blue(a,b){
  var dotCounter = 0;
  
  function addDot() {
    setTimeout(function() {
      if (dotCounter++ < 12) {
        $('.streamer3').append('<div class="dot" id="'+a+'_blue"> </div>');
         //styling dream.. filling colors.. positioning.. showing.. growing..fading
        $("#"+a+"_blue").css({height: 0, width: 0, opacity: 0, top: b * (b/8), left: a}).show()
        .animate({height:0, width:0, opacity: .8}, 1300);
        addDot();
        a += 7;
        b += 1.5;
      }
    }, 30);
  }
  addDot();
}

function dots_red(a,b){
  var dotCounter = 0;
  
  function addDot() {
    setTimeout(function() {
      if (dotCounter++ < 27) {
        $('.streamer2').append('<div class="dot" id="'+a+'_red"> </div>');
         //styling dream.. filling colors.. positioning.. showing.. growing..fading
        $("#"+a+"_red").css({height: 0, width: 0, opacity: 0, top: b * (b/9), right: a}).show()
        .animate({height:0, width:0, opacity: .8}, 1300);
        addDot();
        a += 7;
        b += .8;
      }
    }, 30);
  }
  addDot();
}


function bluebubbles(){
  mainbubble = $('<div class="mainbubble" id="blue">').hide();
  //appending it to body
   $('div#bubbles').append(mainbubble);
   mainbubble.css({'height': '10px', 'width': '10px', opacity:.35, top: 66, left:635
   }).show().animate({'height':'77px','width':'77px',opacity: 1,top: 42, left: 662}, 650, 
       function() {
        $("<span ><img style='display: block;position: relative;width:69px;left:4px;top:10px;' src='http://34f292dd2c21653e268badc8f351aa75712af0ae.gripelements.com/img/blue_text.png' alt='PRWeek Awards' />").hide().appendTo('#blue').fadeIn(300
        ); 
        bluebubbles2();
        var x = 0;
        var y = 0;
        dots_orange(x,y);
        // $('.streamer1').animate({opacity:1},100,
        //  function () {
        //    $('.streamer1 img').animate({width:177,height:70,opacity:.1},200);
        //    $('.streamer1 img').animate({opacity:1},800);
        //  }
        // );
      }
   );
    //rollover animation for 1st blue bubble
    $("#blue").hover(function() {
        $(this).css({'z-index' : '10'}); 
        $(this).addClass("hover") 
          .animate({'background-color':'#61c0ff'}, 140); 
        } , function() {
          $(this).css({'z-index' : '0'}); 
          $(this).removeClass("hover").animate({'background-color':'#58aee6'}, 140);
        }
    )
}

function bluebubbles2() {
  mainbubble = $('<div class="mainbubble" id="blue2">').hide();
  //appending it to body
  $('div#bubbles').append(mainbubble);

  //styling dream.. filling colors.. positioning.. showing.. growing..fading
  mainbubble.css(
    {'height': '10px', 'width': '10px',top: 70,left: 760,opacity:.35}
  ).show().animate( {
      'height':'77px','width':'77px',opacity: 1,top: 99,left: 784}, 1000
  , function() {
      $("<span ><img style='display: block;position: relative;width:63px;left:7px;top:7px;' src='http://34f292dd2c21653e268badc8f351aa75712af0ae.gripelements.com/img/blue2_text.png' alt='PRWeek Awards' />").hide().appendTo('#blue2').fadeIn(650
      );
      redbubble();
      
      var x = 0;
      var y = 0;
      dots_blue(x,y);
    }
   ); //closes animate

        $("#blue2").hover(function() {
            $(this).css({'z-index' : '10'}); 
            $(this).addClass("hover") 
              .animate({'background-color':'#61c0ff'}, 140); 
            } , function() {
              $(this).css({'z-index' : '0'}); 
              $(this).removeClass("hover").animate({'background-color':'#58aee6'}, 140);
            }
        );
}

function redbubble() {
  mainbubble = $('<div class="mainbubble" id="red" onclick="location.href=\'http://www.fahlgrenmortine.com/news/news-release-archive/2012/prweek-agency-of-the-year-finalist.php\'" targe="_blank">').hide();
  $('div#bubbles').append(mainbubble);
  mainbubble.css({
   'height': '10px','width': '10px',top: 128,left: 587,opacity:.35}
  ).show().animate({'height':'47px','width':'47px',opacity: 1, top: 147,left: 610}, 1000, 
     function() {
       $("<span><img src='http://34f292dd2c21653e268badc8f351aa75712af0ae.gripelements.com/img/red_text.png' style='position:relative;top:0;left:7px;' alt='read more' /></span>").hide().appendTo('#red').fadeIn(1000);
         
        var x = 0;
        var y = 0;
        dots_red(x,y);
     }
  ); //closes animate

  // rolover animation for red bubble
  $("#red").hover(function() {
      $(this).css({'z-index' : '10'}); 
      $(this).addClass("hover").animate({'background-color':'#f25e63',width:'+=2px',height:'+=2px',marginTop:'-=1px',marginLeft:'-=1px'}, 200);
      $('#red img').animate({marginTop:'+=1px',marginLeft:'+=1px'}, 200); 
      } , function() {
        $(this).css({'z-index' : '0'}); 
        $(this).removeClass("hover").animate({'background-color':'#f52e33',width:'-=2px',height:'-=2px',marginTop:'+=1px',marginLeft:'+=1px'}, 200);
        $('#red img').animate({marginTop:'-=1px',marginLeft:'-=1px'}, 200); 

      }
  );
}
  
//the function that creates bg circles
function dream(){
  var colors = ["#e67f00", "#58aee6", "#ed282d", "#96be3e"];
  var color = colors[Math.floor(Math.random() * colors.length)];
  var x = Math.floor(Math.random()*$(window).width());
  var y = Math.floor(Math.random()*$(window).height());

  //creating the dream and hide
  drawingpix = $('<div class="drawingpix">').hide();
  $('div#bubbles').append(drawingpix);
  drawingpix.css({width:'10px',height:'10px','background-color':color,top: y-14,left: x-14,opacity:.2, 'opacity':'.3'}).show()
    .animate({'background-color':color,height:'100px',width:'100px',opacity: 0.05,top: y-50,left: x-50}, 2000).fadeOut(1000,  
      function() { $(this).remove(); }
     );
    window.setTimeout('dream()',300);
}

$(document).ready(function() {

    orangebubbles();

    dream();
		
});