/* alert("JS loaded"); */
$(document).ready(function() {

	if ((screen.width>=1024) && (screen.height>=768)) {
	}
	
	/*
   * Set img src & title for testing in static template
   */
  // set the title texts + with, height attr
	/*var titles = ['','Lorem ipsum dolor sit consectetur','Lorem ipsum dolor','Lorem ipsum dolor sit','Lorem ipsum dolor sit consectetur dolor sit'];
  var width = [0,214,214,300,250];
  var height = [0,350,214,214,200];
  var img1 = $.random(1,4);
  var img2 = $.random(1,4);
  var img3 = $.random(1,4);
  var img4 = $.random(1,4);
  
  $('.el1 h2').html(titles[img1]);
  $('.el2 h2').html(titles[img2]);
  $('.el3 h2').html(titles[img3]);
  $('.el4 h2').html(titles[img4]);
  
  $('.el1 img').attr('src', 'assets/img/img' + img1 + '.jpg');
  $('.el2 img').attr('src', 'assets/img/img' + img2 + '.jpg');
  $('.el3 img').attr('src', 'assets/img/img' + img3 + '.jpg');
  $('.el4 img').attr('src', 'assets/img/img' + img4 + '.jpg');
  
  $('.el1 img').attr('width', width[img1]);
  $('.el2 img').attr('width', width[img2]);
  $('.el3 img').attr('width', width[img3]);
  $('.el4 img').attr('width', width[img4]);
  
  $('.el1 img').attr('height', height[img1]);
  $('.el2 img').attr('height', height[img2]);
  $('.el3 img').attr('height', height[img3]);
  $('.el4 img').attr('height', height[img4]);*/
  
  /*
   * Chop the titles in individual letters
   */
	$('.homeitem').each(function(index) {
  	var txt = $('h2', this).text().trim();
  	//alert(txt);
		var newtxt = '';
		var length = txt.length;
		//alert(length);	
	
		$(this).css('width', length * 10);
	
		var charArray = $('h2 a', this).text().trim().split(''); 
		// Clear the html of h2 so we can change it    
		$('h2 a', this).html(''); 
		for (var i = 0; i < charArray.length; i++)
		{
			if (i == (charArray.length)) {
				// for each character, append it to h2 with a span wrapper
  			$('h2 a', this).append(charArray[i]);
			} else {
				$('h2 a', this).append(((charArray[i] == ' ') ? '&nbsp;' : charArray[i]) + ' ');
			}	
		}
  });
  
  // positioning
  // el 1
  
  var firstImageLeft = $.random(0,1);
  
  var w1 =$('.el1 .caption').width();
  var captionoffset = parseInt(w1) + 10;
  captionoffset = '-' + captionoffset + 'px';
  //alert(captionoffset);
  
 	// calc img size
  var randimg1 = $.random(0,50);
  var origRatio = $('.el1 img').attr('width') / $('.el1 img').attr('height');
  var newWidth = 100 + randimg1;
  var newHeight = newWidth / origRatio;
  var imgW1 = newWidth;
  var imgH1 = newHeight;
    
  $('.el1 img').attr('width', newWidth);
  $('.el1 img').attr('height', newHeight);
  $('.el1 img').css('width', newWidth);
  $('.el1').css('top', 133);
  
  if (firstImageLeft) {
  	$('.el1 .caption').css('left', 10 + newWidth);
  	$('.el1').css('left', 100 + $.random(0,200));
  	//alert($('.el1 img').height());
  } else {
  	$('.el1 .caption').css('left', captionoffset);
  	$('.el1').css('left', 500 + $.random(0,100));
  }
  
  // el 2
  var position = $('.el1').position();
  var hpos1 = position.left;
  var pos2 = parseInt(position.top + $('.el1').outerHeight(true));
  //alert(position.left);
  
  var w2 =$('.el2 .caption').width();
  var captionoffset = parseInt(w2) + 10;
  captionoffset = '-' + captionoffset + 'px';
  //alert(captionoffset);
   
  var randimg2 = $.random(0,50);
  var origRatio = $('.el2 img').attr('width') / $('.el2 img').attr('height');
  var newWidth = 100 + randimg2;
  var newHeight = newWidth / origRatio;
  var imgW2 = newWidth;
  var imgH2 = newHeight;
    
  $('.el2 img').attr('width', newWidth);
  $('.el2 img').attr('height', newHeight);
  $('.el2 img').css('width', newWidth);
  
  if (firstImageLeft) {
  	$('.el2 .caption').css('left', captionoffset);
  	$('.el2').css('left', 500 + $.random(0,100));
  
  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
  	position = $('.el2').position();
  	if(position.left > (parseInt(hpos1) + parseInt(imgW1) + Math.abs(parseInt(captionoffset)) + 20)) {
  		//$('.debug').html(position.left + ' ' + parseInt(hpos1) + ' '  + parseInt(imgW1) + ' '  + Math.abs(parseInt(captionoffset)) + ' '  + 20);
  		pos2 = pos2 - (imgH1 - 90);
  	}
  } else {
  	$('.el2 .caption').css('left', 10 + newWidth);
  	$('.el2').css('left', 100 + $.random(0,200));
  	
  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
  	position = $('.el2').position();
  	if((position.left + parseInt(imgW2) + $('.el2 .caption').width() + 20) < parseInt(hpos1)) {
  			pos2 = pos2 - (imgH1 - 90);
  	}
  }
  
  pos2 = pos2 + 'px';
  $('.el2').css('top', pos2);
  
  // el 3
  position = $('.el2').position();
  var hpos2 = position.left;
  var pos3 = parseInt(position.top + $('.el2').outerHeight(true));
  //alert(pos3);
  
  var w3 =$('.el3 .caption').width();
  var captionoffset = parseInt(w3) + 10;
  captionoffset = '-' + captionoffset + 'px';
  //alert(captionoffset);
  
  var randimg3 = $.random(0,50);
  var origRatio = $('.el3 img').attr('width') / $('.el3 img').attr('height');
  var newWidth = 100 + randimg3;
  var newHeight = newWidth / origRatio;
  var imgW3 = newWidth;
  var imgH3 = newHeight;
    
  $('.el3 img').attr('width', newWidth);
  $('.el3 img').attr('height', newHeight);
  $('.el3 img').css('width', newWidth);
    
  if (firstImageLeft) {
   $('.el3 .caption').css('left',10 + newWidth);
 	 $('.el3').css('left', 140 + $.random(0,100));
  
  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
  	position = $('.el3').position();
  	if((position.left + parseInt(imgW3) + $('.el3 .caption').width() + 20) < parseInt(hpos2)) {
  			pos3 = pos3 - (imgH2 - 90);
  	}
  } else {
  	$('.el3 .caption').css('left', captionoffset);
  	$('.el3').css('left', 500 + $.random(0,100));
  
  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
  	position = $('.el3').position();
  	if(position.left > (parseInt(hpos2) + parseInt(imgW2) + Math.abs(parseInt(captionoffset)) + 20)) {
  		//$('.debug').html(position.left + ' ' + parseInt(hpos1) + ' '  + parseInt(imgW1) + ' '  + Math.abs(parseInt(captionoffset)) + ' '  + 20);
  		pos3 = pos3 - (imgH2 - 90);
  	}
  }
  
  // check if the 1st image is not lower than pos3, if so, change pos3
 	var imgPos1 = $('.el1 img').offset();
 	imgPosV1 = imgPos1.top;
 	//$('.debug').html(pos3 + ' / ' + imgPosV1 + ' ' + imgH1);
 	if ((imgPosV1 + imgH1) > (pos3 - 20)) {
 		pos3 = imgPosV1 + imgH1 + 20;
 	}
  
  //$total = position.left + parseInt(imgW2)  + $('.el3 .caption').width()  + 20;
  //$('.debug').html(position.left + ' ' + parseInt(imgW2) + ' '  + $('.el3 .caption').width() + ' '  + 20 + ' / ' + $total + ' < ' + parseInt(hpos2));
  
  pos3 = pos3 + 'px';
  $('.el3').css('top', pos3);
 
  // el 4
  position = $('.el3').position();
  var hpos3 = position.left;
  var pos4 = parseInt(position.top + $('.el3').outerHeight(true));
  
  //alert(pos4);
  
  var w4 =$('.el4 .caption').width();
  var captionoffset = parseInt(w4) + 10;
  captionoffset = '-' + captionoffset + 'px';
  //alert(captionoffset);
  
  var randimg4 = $.random(0,50);
  var origRatio = $('.el4 img').attr('width') / $('.el4 img').attr('height');
  var newWidth = 100 + randimg4;
  var newHeight = newWidth / origRatio;
    
  $('.el4 img').attr('width', newWidth);
  $('.el4 img').attr('height', newHeight);
  $('.el4 img').css('width', newWidth);
  
  if (firstImageLeft) {
  	$('.el4 .caption').css('left', captionoffset);
  	$('.el4').css('left', 450 + $.random(0,100));
  
  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
 		position = $('.el4').position();
  	if(position.left > (parseInt(hpos3) + parseInt(imgW3) + Math.abs(parseInt(captionoffset)) + 20)) {
  		//alert(position.left + ' ' + parseInt(hpos1) + ' '  + parseInt(imgW1) + ' '  + Math.abs(parseInt(captionoffset)) + ' '  + 20);
  		pos4 = pos4 - (imgH3 - 90);
  	}
  } else {
  	$('.el4 .caption').css('left',10 + newWidth);
 	 	$('.el4').css('left', 140 + $.random(0,100));

  	// calculate vertical position
  	// if this left pos > left pos of prev el + width of prev el img + width of this el caption + 20px margin, move up by prev el img height - 70px (for caption)
  	position = $('.el4').position();
  	if((position.left + parseInt(imgW3) + $('.el4 .caption').width() + 20) < parseInt(hpos3)) {
  			pos4 = pos4 - (imgH3 - 90);
  	}
  }
  
  // check if the 2st image is not lower than pos4, if so, change pos4
 	var imgPos2 = $('.el2 img').offset();
 	imgPosV2 = imgPos2.top;
 	//$('.debug').html(pos4 + ' / ' + imgPosV2 + ' ' + imgH2);
 	if ((imgPosV2 + imgH2) > (pos4 - 20)) {
 		pos4 = imgPosV2 + imgH2 + 20;
 	}
  
  pos4 = pos4 + 'px';
  $('.el4').css('top', pos4);
  
});

// return random number
jQuery.extend({
	random: function(min, max) {
	  return Math.round(min + ((max - min)*(Math.random() % 1)));
	}
});