ola4doc/sys/js/main.js

$(document).ready(function(){
	var _$users = $('div.user');

	function init(){

		wrapHTML();
		getOutImages();

		randomPosition($('div.user h1:first'));
		randomPosition($('div.user h2:first'));
		createLineHeader();
		createLineContent();
		createLineContentImages();
		createLineImages();
	}

	function wrapHTML(){
		_$users.each(function(){
			var $header = $('<header />').append($('h1:first, h2:first', this));
			$header.prependTo(this)
		});

	}

	function getOutImages(){
		$('div.user img').each(function(){
			var cnt = $(this).parent('p').contents();
			$(this).parent('p').replaceWith(cnt);
		});
	}

	function createLineHeader(){

		_$users.each(function(){
				var h2Height = $(this).find('h2:first').outerHeight();

				var h1Width = $(this).find('h1:first').outerWidth();

				var x1 = $(this).find('h2:first').position().left + 50;
				var y1 = $(this).find('h2:first').position().top + h2Height;
				var x2 = $(this).find('h1:first').position().left + (h1Width / 2);
				var y2 = $(this).find('h1:first').position().top;
				// console.log(x1, x2, y1, y2);
				var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
		});

	}

	function createLineContent(){
		_$users.each(function(){
				var h1Height = $(this).find('h1:first').outerHeight();
				// var h1Width = $(this).find('h1').outerWidth();

				var x1 = $(this).find('h1:first').position().left + 50;
				var y1 = $(this).find('h1:first').position().top + h1Height;
				var x2 = $(this).find('.content').position().left;
				var y2 = $(this).find('.content').position().top;
				// console.log(x1, x2, y1, y2);
				var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
		});
	}

	function createLineContentImages(){
		_$users.each(function(){
				var contentHeight = $(this).find('.content').outerHeight();
				// var h1Width = $(this).find('h1').outerWidth();

				var x1 = $(this).find('.content').position().left;
				var y1 = $(this).find('.content').position().top + contentHeight;
				var x2 = $(this).find('.images').position().left + 100;
				var y2 = $(this).find('.images').position().top + 10;
				// console.log(x1, x2, y1, y2);

				if($(this).find('.images').find('li').length){
					var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
				}

		});
	}

	function createLineImages(){
		_$users.each(function(){
			$(this).find('.images').find('li').each(function(){
				var height = $(this).outerHeight();
				var width = $(this).outerWidth();

				if($(this).next().length){
					// console.log($(this));
					var x1 = $(this).position().left + width ;
					var y1 = $(this).position().top + height + 15;
					var x2 = $(this).next().position().left + width - 100;
					var y2 = $(this).next().position().top + 16;
					var linediv = $(this).line(x1, y1, x2, y2, {width: 2});
					// console.log(y1);
				}
			});

		});
	}

	function randomPosition($element){
		$element.each(function(){
			var randomPos = Math.random() * (_$users.width()- $(this).width());
			var width = $(this).width();
			$(this).css({
				'left': randomPos,
				'width': width
			});

		});
	}


	init();


});