var tagplaces10 = [
        { x: 500, y: 70 },
        { x: 755, y: 145 },
        { x: 730, y: 325 },
        { x: 300, y: 320 },
        { x: 200, y: 200 },
        { x: 140, y: 120 },
        { x: 490, y: 210 },
        { x: 310, y: 45 },
        { x: 745, y: 55 },
        { x: 900, y: 115 },
           
        { x: 130, y: 10 },
        { x: 960, y: 12 },
        { x: 415, y: 15 },
        { x: 690, y: 15 },
        { x: 125, y: 300 },
        { x: 530, y: 305 },
        { x: 675, y: 270 },
        { x: 965, y: 265 },
        { x: 440, y: 420 },
        { x: 680, y: 420 },
        { x: 275, y: 460 },
        { x: 530, y: 460 },
        { x: 800, y: 460 },
        { x: 345, y: 275 },
        { x: 880, y: 305 },
        { x: 135, y: 360 },
        { x: 550, y: 355 },
        { x: 935, y: 350 },
        { x: 585, y: 400 },
        { x: 815, y: 400 },
        { x: 130, y: 430 },
        { x: 950, y: 415 }
       ];

      var tagplaces15 = [
        { x: 500, y: 60 },
        { x: 680, y: 190 },
        { x: 700, y: 320 },
        { x: 155, y: 175 },
        { x: 215, y: 55 },
        { x: 865, y: 135 },
        { x: 500, y: 210 },
        { x: 370, y: 5 },
        { x: 670, y: 5 },
        { x: 300, y: 290 },
        { x: 510, y: 300 },
        { x: 130, y: 270 },
        { x: 885, y: 300 },
        { x: 295, y: 400 },
        { x: 705, y: 410 },

        { x: 130, y: 10 },
        { x: 910, y: 10 },
        { x: 125, y: 125 },
        { x: 730, y: 115 },
        { x: 490, y: 390 },
        { x: 920, y: 410 },
        { x: 280, y: 450 },
        { x: 525, y: 450 },
        { x: 800, y: 450 },
        { x: 325, y: 170 },
        { x: 700, y: 190 },
        { x: 380, y: 245 },
        { x: 940, y: 230 },
        { x: 135, y: 365 },
        { x: 930, y: 345 },
        { x: 140, y: 420 },
        { x: 710, y: 475 }
      ];

      var tagplaces20 = [
        { x: 500, y: 170 },
        { x: 340, y: 30 },
        { x: 765, y: 220 },
        { x: 710, y: 310 },
        { x: 145, y: 165 },
        { x: 630, y: 75 },
        { x: 875, y: 140 },
        { x: 155, y: -20 },
        { x: 845, y: 5 },
        { x: 230, y: 295 },
        { x: 105, y: 325 },
        { x: 500, y: 310 },
        { x: 135, y: 275 },
        { x: 900, y: 280 },
        { x: 135, y: 435 },
        { x: 530, y: 430 },
        { x: 900, y: 400 },
        { x: 300, y: 385 },
        { x: 715, y: 410 },
        { x: 325, y: 225 },
        
        { x: 660, y: 5 },
        { x: 115, y: 70 },
        { x: 900, y: 95 },
        { x: 145, y: 120 },
        { x: 490, y: 380 },
        { x: 600, y: 470 },
        { x: 430, y: 10 },
        { x: 350, y: 170 },
        { x: 740, y: 175 },
        { x: 950, y: 230 },
        { x: 940, y: 350 },
        { x: 340, y: 450 }
      ];

      function tagspos() {
        var tagcloudH = $(window).height() - 250;
        if (tagcloudH > 700) tagcloudH = 700;
        if (tagcloudH < 260) tagcloudH = 260;
        var k = tagcloudH / 500;
        var cloud = $('#wordcloud');
        var xcorr = (cloud.width() - 1240) / 2;

        cloud.height(tagcloudH);

        var bigtagsC = cloud.children('span.w10,span.w9,span.w8,span.w7').length;
        var places = [];
        
        if (bigtagsC <= 10) {
          places = tagplaces10;
        }
        else if (bigtagsC <= 15) {
          places = tagplaces15;
        }
        else {
          places = tagplaces20;
        }

         var tags = cloud.children('span.tagcloud');
         for (i in tags) {
          var tag = tags[i];
          if (i < places.length) {
            $(tag).css('left', places[i].x + xcorr).css('top', places[i].y * k).css('display', 'block').attr("id", "c"+i);
          }
        }
      }

      var cloudsizes0 = [
        { width: 207, height: 45, offx:6, offy:-3, cssclass: 'c1-300' },    // 119
        { width: 276, height: 90, offx:8, offy:-4, cssclass: 'cl-400' },    // 159
        { width: 345, height: 130, offx:10, offy:-5, cssclass: 'c1-500' },    // 199 69% 62.8%   2%   -2.5%

        { width: 201, height: 45, offx:-12, offy:-3, cssclass: 'c2-300' },    // 140
        { width: 268, height: 90, offx:-16, offy:4, cssclass: 'c2-400' },    // 186
        { width: 335, height: 130, offx:-20, offy:-5, cssclass: 'c2-500' },    // 232    67% 53.9%   -4% -2.2%

        { width: 201, height: 45, offx:0, offy:0, cssclass: 'c3-300' },      // 150
        { width: 268, height: 45, offx:0, offy:0, cssclass: 'c3-400' },       // 200
        { width: 335, height: 90, offx:0, offy:0, cssclass: 'c3-500' },        // 250    67%  34% 

        { width: 186, height: 90, offx:-30, offy:-12, cssclass: 'c4-300' },    // 143
        { width: 248, height: 90, offx:-40, offy:-16, cssclass: 'c4-400' },  // 191
        { width: 310, height: 130, offx:-50, offy:-20, cssclass: 'c4-500' },  // 500 239  62% 60.7% -10%  -8.4%

 /*       { width: 180, height: 33, offx:-36, offy:-30, cssclass: 'c5-300' },    // 137*/
        { width: 240, height: 45, offx:-48, offy:-40, cssclass: 'c5-400' },   // 183
        { width: 300, height: 45, offx:-60, offy:-50, cssclass: 'c5-500' },    // 229      60%   24%  -12%  -21.8%
   
        { width: 186, height: 45, offx:30, offy:-3, cssclass: 'c6-300' },    // 139
        { width: 248, height: 90, offx:40, offy:-4, cssclass: 'c6-400' },    // 185
        { width: 310, height: 90, offx:50, offy:-5, cssclass: 'c6-500' }    // 231     62%   49.8% 10%   -2.2%
        ];

     var cloudsizes1 = [   // ccsW*width/1000 = actual width
        {width: 186, height: 45, offx: 30, offy: -3, cssclass: 'c6-300' },   // 139
        {width: 195, height: 45, offx: -12, offy: -3, cssclass: 'c2-300' },   // 140
        {width: 201, height: 45, offx: 0, offy: 0, cssclass: 'c3-300' },     // 150
        {width: 217, height: 45, offx: 6, offy: -3, cssclass: 'c1-300' },   // 119
        {width: 240, height: 45, offx: -48, offy: -40, cssclass: 'c5-400' },   // 183
        {width: 268, height: 45, offx: 0, offy: 0, cssclass: 'c3-400' },       // 200
        {width: 300, height: 45, offx: -60, offy: -50, cssclass: 'c5-500' },   // 229      60%   24%  -12%  -21.8%


        {width: 186, height: 90, offx: -30, offy: -12, cssclass: 'c4-300' },   // 143
        {width: 228, height: 90, offx: 40, offy: -4, cssclass: 'c6-400' },   // 185
        {width: 248, height: 90, offx: -40, offy: -16, cssclass: 'c4-400' },  // 191
        {width: 268, height: 90, offx: -16, offy: 4, cssclass: 'c2-400' },   // 186
        {width: 276, height: 90, offx: 8, offy: -4, cssclass: 'cl-400' },   // 159
        {width: 310, height: 90, offx: 50, offy: -5, cssclass: 'c6-500'},    // 231     62%   49.8% 10%   -2.2%
        {width: 335, height: 90, offx: 0, offy: 0, cssclass: 'c3-500' },       // 250    67%  34% 

        {width: 310, height: 130, offx: -50, offy: -20, cssclass: 'c4-500' },  // 500 239  62% 60.7% -10%  -8.4%
        {width: 335, height: 130, offx: -20, offy: -5, cssclass: 'c2-500' },   // 232    67% 53.9%   -4% -2.2%
        {width: 345, height: 130, offx: 10, offy: -5, cssclass: 'c1-500' }   // 199 69% 62.8%   2%   -2.5%

        ];

    var cloudsizes = [   
        {width:  80, height: 80, offx: -13, offy: -5, bk:'4-129-80', aw: 129, ah: 62},   // 139
        {width:  95, height: 80, offx: -15, offy: -2, bk: '6-153-95', aw: 153, ah: 71},   // 140
        {width: 110, height: 80, offx: 17, offy: -2, bk: '2-200-110', aw: 200, ah: 93},     // 150
        {width: 125, height: 80, offx: 13, offy: 0, bk: '7-250-125', aw: 250, ah: 116},   // 119
        {width: 140, height: 80, offx: -23, offy: -3, bk: '6f-226-140', aw: 226, ah: 104},   // 183
        {width: 155, height: 80, offx: 0, offy: 0, bk: '3f-231-155', aw: 231, ah: 116},       // 200
        {width: 170, height: 80, offx: 10, offy: -3, bk: '2f-254-170', aw: 254, ah: 118},   // 229      60%   24%  -12%  -21.8%
        {width: 185, height: 80, offx: 0, offy: -8, bk: '1-300-185', aw: 300, ah: 119},   // 143
        {width: 200, height: 80, offx: 0, offy: 0, bk: '3-300-200', aw: 300, ah: 150},   // 185
        {width: 215, height: 80, offx: 0, offy: 0, bk: '3f-321-215', aw: 321, ah: 161},  // 191
        {width: 230, height: 80, offx: 7, offy: -3, bk: '1-333-230', aw: 333, ah: 133}   // 186

        ];

      function norm(a, b) {
        return a ;
      }

     function addCloud(index, thisItem, w,h) {
       var item = $('<div>&nbsp;</div>');//.addClass(cloudsizes[index].cssclass);
       item.addClass('tagcloudbk');
       item.attr("id", $(thisItem).attr("id") + "bk");
       item.css('width', cloudsizes[index].aw);
       item.css('height', cloudsizes[index].ah);
       item.css('background-image', "url('/dsgn/clouds30/"+cloudsizes[index].bk + ".png')");

       $('#clouds').append(item);
       var iw = item.width();
       var ih = item.height();

       var ip = $(thisItem).position();
       var left = ip.left + (w - iw) / 2 + cloudsizes[index].offx;
       var top = ip.top + (h - ih) / 2 + cloudsizes[index].offy;
       item.css('position', 'absolute');
       item.css('left', left + 'px');
       item.css('top', top + 'px');
     }

     function renderMatchedCloud() {
       var index = -1;
       var storeddif = 1000000;
       var outerBlock = $(this);
       var textblock = $(outerBlock.children()[0]);
       var w = textblock.outerWidth();
       var h = textblock.outerHeight();
       for (var i = cloudsizes.length - 1; i >= 0; i--) {
         if((cloudsizes[i].width >= w) && (cloudsizes[i].height >= h)) {
           var dif = norm(cloudsizes[i].width, cloudsizes[i].height) - norm(w, h);
           if (dif < 0) dif = 1000000;
           if (dif < storeddif) {
             index = i;
             storeddif = dif;
           }
         }
       }

       if (index >= 0) {
         addCloud(index, outerBlock, outerBlock.outerWidth(),outerBlock.outerHeight());
       }
     }

     function wordHover() {
       $(this).addClass('hovered');
     }

     function wordBlur() {
       $(this).removeClass('hovered');
     }

     var wordCloudH;
     function fixColor() {
       var top = $(this).position().top;
       if(top > wordCloudH/2){
         $(this).css('color', '#00558c');
       }
     }

     function fixposition() {
       var item = $(this);
       var pos = item.position();
     
       if(pos.top < 0) {
         item.css('top', '0px');
         //item.css('border', 'solid 1px red');
       }
     }

     function clouds() {
       //$('#loadicon').remove();
       //$('#wordcloud span').each(fixposition);
       $('.w10,.w9,.w8,.w7').each(renderMatchedCloud);

       //wordCloudH = $('#wordcloud').outerHeight();
       $('.w1,.w2,.w3,.w4,.w5,.w6').each(fixColor);

       //$('#wordcloud a').hover(wordHover, wordBlur);
       
     }

     // ======================================== //
     function buildClouds() {
       tagspos();
       clouds();
       if (typeof onBuildClouds != "undefined")
            onBuildClouds();

     }

     $(document).ready(function () {
       buildClouds();
     });