App = {
	init: function(){
		this.height = $(window).height() - 75;
		this.config = {
			scrollStep: 20,
			rightBar: {
				max: 600,
				min: 190,
				cur: 600
			},
			leftBar: {
				max: 0,
				min: -300,
				cur: 0,
				skip: 0
			}
		}

		this.registerEvents();

		this.getData();

		if(isMobile.any()){
			$('.pages-left').eq(0).css({
				'transition-property':'top,left', 
				'transition-duration': '0.2s, 0.2s',
				'transition-timing-function': 'linear,linear',
				
				'-ms-transition-property': 'top,left',
				'-ms-transition-duration': '0.2s, 0.2s', 
				'-ms-transition-timing-function': 'linear,linear',
				
				'-moz-transition-property': 'top,left',
				'-moz-transition-duration': '0.2s, 0.2s',
				'-moz-transition-timing-function': 'linear,linear',
				 
				'-webkit-transition-property': 'top,left',
				'-webkit-transition-duration': '0.2s, 0.2s',
				'-webkit-transition-timing-function': 'linear,linear'
			});

			var style = "<style>"+
						'.page-left-bg img, .page-left-bg canvas{'+
							'transition-property: opacity;'+ 
							'transition-duration: 0.1s;'+
							'transition-timing-function: linear;'+
							
							'-ms-transition-property: opacity;'+ 
							'-ms-transition-duration: 0.1s;'+
							'-ms-transition-timing-function: linear;'+
							
							'-moz-transition-property: opacity;'+ 
							'-moz-transition-duration: 0.1s;'+
							'-moz-transition-timing-function: linear;'+
							 
							'-webkit-transition-property: opacity;'+ 
							'-webkit-transition-duration: 0.1s;'+
							'-webkit-transition-timing-function: linear;'+
						'}'+
						"</style>";
			$('head').eq(0).append(style);

			if(!this.config.blurOrigin) {
				var src = this.leftBarBgUI.css('background-image');
				if(src.indexOf('url') >=0){
					src = src.substr(4,src.length - 5);
					if(src[0] == '\'' || src[0] == '"'){
						src = src.substr(1);
					}
					if(src[src.length-1] == '\'' || src[src.length-1] == '"'){
						src = src.substr(0,src.length-1);
					}
				}
				this.config.blurOrigin = src;
			}	

			var _self = this;

			var img = new Image();
			img.style.opacity = 0;
			img.setAttribute('id','imgBlur3');
			img.onload = function(){
				Pixastic.process(img, "blurfast", {amount: 0.3});
			}
			this.leftBarBgUI.get(0).appendChild(img);
			img.src = this.config.blurOrigin;


			var img1 = new Image();
			img1.style.opacity = 0;
			img1.setAttribute('id','imgBlur5');
			img1.onload = function(){
				Pixastic.process(img1, "blurfast", {amount: 0.5});
			}
			this.leftBarBgUI.get(0).appendChild(img1);
			img1.src = this.config.blurOrigin;


			var img2 = new Image();
			img2.style.opacity = 0;
			img2.setAttribute('id','imgBlur8');
			img2.onload = function(){
				Pixastic.process(img2, "blurfast", {amount: 0.8});
			}
			this.leftBarBgUI.get(0).appendChild(img2);
			img2.src = this.config.blurOrigin;


			this.leftBarBgUI.css('background','none');
		}
	},
	
	mouseWheel: function(e){
		if(this.config.currentWheel == undefined) this.config.currentWheel = 0;

		if(this.config.currentWheel <= 0 && e.deltaY > 0){
			if(this.config.rightBar.cur <= this.config.rightBar.max){
				this.config.rightBar.cur += this.config.scrollStep;
				this.scrollerUI.css('left', this.config.rightBar.cur);
			}

			if(this.config.leftBar.cur <= this.config.leftBar.max){
				this.leftBarUI.css('left', this.config.leftBar.cur);
				this.config.leftBar.cur += this.config.scrollStep;
				this.blurIt();
			}
		}else{
			if(this.config.rightBar.cur <= this.config.rightBar.min){
				var allowLeft = (this.contentUI.width() + 120) - this.scrollerUI.width();
				if(e.deltaY < 0){
					if(this.config.currentWheel * this.config.scrollStep <= allowLeft){
						this.config.currentWheel -= e.deltaY;
					}
				}else{
					this.config.currentWheel -= e.deltaY;
				}
				this.scrollerUI.scrollLeft(this.config.currentWheel * this.config.scrollStep);
			}else{
				this.config.rightBar.cur -= this.config.scrollStep;
				this.scrollerUI.css('left', this.config.rightBar.cur);
				if(this.config.leftBar.cur > this.config.leftBar.min){
					this.config.leftBar.cur -= this.config.scrollStep;
					this.leftBarUI.css('left', this.config.leftBar.cur);
					this.blurIt();
				}
			}
		}
	},

	enableBlur: true,

	scrollLeft: function(scrollValue){
		this.config.rightBar.cur = this.config.rightBar.max - scrollValue;
		if(this.config.rightBar.cur < this.config.rightBar.min){
			this.config.rightBar.cur = this.config.rightBar.min;
		}
		if(this.config.rightBar.cur > this.config.rightBar.max)
			this.config.rightBar.cur = this.config.rightBar.max;

		this.scrollerUI.css('left', this.config.rightBar.cur);
		
		this.config.leftBar.cur = this.config.leftBar.max - scrollValue;
		if(this.config.leftBar.cur < this.config.leftBar.min)
			this.config.leftBar.cur = this.config.leftBar.min;
		if(this.config.leftBar.cur > this.config.leftBar.max)
			this.config.leftBar.cur = this.config.leftBar.max;
			
		this.leftBarUI.css('left', this.config.leftBar.cur);

		if(this.enableBlur){
			this.enableBlur = false;
			var self = this;

			if(this.config.leftBar.cur >= this.config.leftBar.max){
				$('#leftBarBgUI img').css('opacity', 0);
				$('#leftBarBgUI canvas').css('opacity', 0);

				$('#imgBlur1').css('opacity',1);
			}
			else if(this.config.leftBar.cur >= (this.config.leftBar.max + this.config.leftBar.min)/3){
				$('#leftBarBgUI img').css('opacity', 0);
				$('#leftBarBgUI canvas').css('opacity', 0);

				$('#imgBlur3').css('opacity',1);				
			}
			else if(this.config.leftBar.cur >= (this.config.leftBar.max + this.config.leftBar.min)/2){
				$('#leftBarBgUI img').css('opacity', 0);
				$('#leftBarBgUI canvas').css('opacity', 0);

				$('#imgBlur5').css('opacity',1);
			}
			else if(this.config.leftBar.cur >= (this.config.leftBar.max + this.config.leftBar.min)/1){
				$('#leftBarBgUI img').css('opacity', 0);
				$('#leftBarBgUI canvas').css('opacity', 0);

				$('#imgBlur8').css('opacity',1);
			}

			var blurTimeout = setTimeout(function(){
				clearTimeout(blurTimeout);
				self.enableBlur = true;
			}, 1000);
		}
	},
	
	blurIt: function(){
		var percent = this.config.leftBar.cur/this.config.leftBar.min;
		var blur = percent;
		if(this.oldBlur){
			if(blur != 0 && Math.round(blur*100) < this.oldBlur + 20 && Math.round(blur*100) > this.oldBlur + 20){
				return;
			}
		}

		this.oldBlur = Math.round(blur*100);
		
		if(!this.config.blurOrigin) {
			var src = this.leftBarBgUI.css('background-image');
			if(src.indexOf('url') >=0){
				src = src.substr(4,src.length - 5);
				if(src[0] == '\'' || src[0] == '"'){
					src = src.substr(1);
				}
				if(src[src.length-1] == '\'' || src[src.length-1] == '"'){
					src = src.substr(0,src.length-1);
				}
			}
			this.config.blurOrigin = src;

			this.zIndex = 3;
		}	

		var _self = this;
		(
			function(blur){
				var img = new Image();
				img.style.zIndex = this.zIndex++;
				img.style.opacity = 0;
				img.onload = function(){
					if(_self.leftBarBgUI.css('background') != 'non'){
						_self.leftBarBgUI.css('background','none');
					}

					Pixastic.process(img, "blurfast", {amount: blur});

					var numberImage = _self.leftBarBgUI.children('canvas').length;
					if(numberImage > 0){
						_self.leftBarBgUI.children('canvas').eq(numberImage-1).css('opacity',1);

						$('#leftBarUI canvas').css('margin-left', -3*parseInt($('#leftBarUI').css('left'))/4+'px');
					}
					if(numberImage > 2){
						for(var i=0;i<numberImage-2;i++){
							_self.leftBarBgUI.children('canvas').eq(i).remove();
						}
					}

					numberImage = _self.leftBarBgUI.children('img').length;
					if(numberImage > 0){
						_self.leftBarBgUI.children('img').eq(numberImage-1).css('opacity',1);
						$('#leftBarUI img').css('<margin-left></margin-left>', -3*parseInt($('#leftBarUI').css('left'))/4+'px');
					}
					if(numberImage > 2){
						for(var i=0;i<numberImage-2;i++){
							_self.leftBarBgUI.children('img').eq(i).remove();
						}
					}

					//_self.leftBarBgUI.children('img').css('margin-left',(Math.abs(_self.config.leftBar.cur))+'px');
					//_self.leftBarBgUI.children('canvas').css('margin-left',(Math.abs(_self.config.leftBar.cur))+'px');
				}
				_self.leftBarBgUI.get(0).appendChild(img);
				img.src = _self.config.blurOrigin;

				
				if($('#leftBarUI canvas').length > 0)
					$('#leftBarUI canvas').css('margin-left', -3*parseInt($('#leftBarUI').css('left'))/4+'px');

				if($('#leftBarUI img').length > 0)
					$('#leftBarUI img').css('<margin-left></margin-left>', -3*parseInt($('#leftBarUI').css('left'))/4+'px');
			}
		)(blur);
	},
	
	registerEvents: function(){
		var _self = this;
		$(document).on('mousewheel', function(event) {
		    _self.mouseWheel(event);
		});

		if(isMobile.any()){
			$('#scrollerUI').bind('scroll touchmove', function(event) {
			    var scrollLeft = $(this).scrollLeft();
			    _self.scrollLeft(scrollLeft);
			});
		}

		$( window ).resize(function(){
			_self.resizeWindow();
		});

		this.scrollerUI = $('#scrollerUI');
		this.contentUI = $('#contentUI');
		this.leftBarUI = $('#leftBarUI');
		this.leftBarBgUI = $('#leftBarBgUI');
	},

	getData: function(){
		var numberRow = 2;
		if(this.height >= 620){
			numberRow = 3;
		}
		
		var data = new Array();
		if(numberRow == 2){
			for(var i=0;i<3;i++){
				data.push({
					background: 'res/images/data/1.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/1.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/2.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'http://e0.365dm.com/13/08/768x576/Barnsley-v-Wigan-Ben-Watson-celeb-2_2981998.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'http://i.telegraph.co.uk/multimedia/archive/01811/sergio_aguero_1811371c.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/3.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/3.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});
			}
		}
		else{
			for(var i=0;i<3;i++){
				data.push({
					background: 'res/images/data/1.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/1.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/2.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'http://e0.365dm.com/13/08/768x576/Barnsley-v-Wigan-Ben-Watson-celeb-2_2981998.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'http://e0.365dm.com/13/08/768x576/Barnsley-v-Wigan-Ben-Watson-celeb-2_2981998.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/3.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});

				data.push({
					background: 'res/images/data/3.jpg',
					avatar: 'res/images/avatar/default.jpg',
					name: 'Marion',
					post: "What's new on Sunday Morning"
				});
			}	
		}

		this.renderData(data, numberRow);
	},

	renderData: function(data, numberRow){
		if(numberRow == 2){
			this.currentNumberRow = 2;
			this._renderDataTwoRow(data);
		}
		else if(numberRow == 3){
			this.currentNumberRow = 3;
			this._renderDataThreeRow(data);
		}

		this.numberRow = numberRow;	

		/*-- register event to display comments */	
		$('.block').bind('mouseenter', function(){
			$(this).find('.info').eq(0).animate({
				bottom: 0
			}, 300);
		});

		$('.block').bind('mouseleave', function(){
			$(this).find('.info').eq(0).animate({
				bottom: '-28px'
			}, 300);
		});
	},

	_generateItem: function(cls, style, data){
		return '<div class="'+cls+' block" style="background-image: url('+data.background+');'+style+'">'+
					'<div class="info">'+
						'<div class="avatar-small" style="background-image: url('+data.avatar+')"></div>'+
						'<div class="desc">'+
							'<b>'+data.name+'</b>'+
							' posted a note '+
							'<b>'+data.post+'</b>'+
						'</div>'+
						'<div class="meta">'+
							'<div class="icon icon-clock">1h ago</div>'+
							'<div class="icon icon-more">...</div>'+
							'<div class="icon icon-share"></div>'+
							'<div class="icon icon-chat"></div>'+
							'<div class="icon icon-star"></div>'+
						'</div>'+
					'</div>'+
				'</div>';
	},
	_renderDataTwoRowOld: function(data){
		var html = "";
		for(var i=0;i<data.length;i+=6){
			html += '<div class="content column-blog-2">'+
						'<div class="column-child">'+
							this._generateItem('small-item','margin-bottom: 10px;',data[i]);

			if(i+1 < data.length){
				html += this._generateItem('small-item','',data[i+1]);
			}
			html +=		'</div>'
			if(i+2 < data.length){
				html += this._generateItem('height-item','margin-left: 10px;',data[i+2]);
			}
			html +=	'</div>';

			if(i+3 < data.length){
				html += '<div class="content column-blog-2">';
				html += this._generateItem('large-item','margin-bottom: 10px;',data[i+3]);
				if(i+4 < data.length){
					html += this._generateItem('large-item','',data[i+4]);
				}
				html += '</div>';
			}
			if(i+5 < data.length){
				html += '<div class="content column-blog-2">';
				html += this._generateItem('big-square-item','',data[i+5]);
				html += '</div>';
			}
		}

		$('#contentUI').html(html);

		$('#scrollerUI').css('top',60+(this.height-410)/2+'px');
	},

	_renderDataTwoRow: function(data){
		var html = "";
		var style = "";
		var width = 0;

		for(var i=0;i<data.length;i+=7){
			style = "top: 0px; left: "+(420*4*i/7)+"px";
			html += this._generateItem('small-item',style,data[i]);

			width += 210;

			if(i+1 < data.length){
				style = "top: 210px; left: "+(420*4*i/7)+"px";
				html += this._generateItem('small-item',style,data[i+1]);
			}
			
			if(i+2 < data.length){
				style = "top: 0px; left: "+(420*4*i/7 + 210)+"px";
				html += this._generateItem('height-item',style,data[i+2]);

				width += 210;
			}
			
			if(i+3 < data.length){
				style = "top: 0px; left: "+(420*4*i/7 + 420)+"px";
				html += this._generateItem('large-item',style,data[i+3]);
				if(i+4 < data.length){
					style = "top: 210px; left: "+(420*4*i/7 + 420)+"px";
					html += this._generateItem('large-item',style,data[i+4]);
				}

				width += 420;
			}
			if(i+5 < data.length){
				style = "top: 0px; left: "+(420*4*i/7 + 420*2)+"px";
				html += this._generateItem('big-square-item',style,data[i+5]);

				width += 420;
			}
			if(i+6 < data.length){
				style = "top: 0px; left: "+(420*4*i/7 + 420*3)+"px";
				html += this._generateItem('big-square-item',style,data[i+6]);

				width += 420;
			}
		}

		$('#contentUI').html(html);
		$('#contentUI').css('width',width+'px');

		$('#scrollerUI').css('top',60+(this.height-410)/2+'px');
	},

	_renderDataThreeRowOld: function(data){
		var html = "";
		for(var i=0;i<data.length;i+=7){
			html += '<div class="content column-blog-3">'+
						'<div class="column-child">'+
							this._generateItem('small-item','margin-bottom: 10px;',data[i]);

			if(i+1 < data.length){
				html += this._generateItem('small-item','',data[i+1]);
			}
			html +=		'</div>'
			if(i+2 < data.length){
				html += this._generateItem('height-item','margin-left: 10px;',data[i+2]);
			}
			if(i+3 < data.length){
				html += this._generateItem('large-item','margin-top: 10px;',data[i+3]);
			}
			html +=	'</div>';

			if(i+4 < data.length){
				html += '<div class="content column-blog-3">';
				html += this._generateItem('large-item','margin-bottom: 10px;',data[i+4]);
				if(i+5 < data.length){
					html += this._generateItem('big-square-item','',data[i+5]);
				}
				html += '</div>';
			}

			if(i+6 < data.length){
				html += '<div class="content column-blog-3">';
				html += this._generateItem('big-height-item','',data[i+6]);
				html += '</div>';
			}
		}

		$('#contentUI').html(html);

		$('#scrollerUI').css('top',60+(this.height-620)/2+'px');
	},

	_renderDataThreeRow: function(data){
		var html = "";
		var style = "";
		var width = 0;

		for(var i=0;i<data.length;i+=7){
			style = "top: 0px; left: "+(420*3*i/7)+"px";
			html += this._generateItem('small-item',style,data[i]);

			width += 210;

			if(i+1 < data.length){
				style = "top: 210px; left: "+(420*3*i/7)+"px";
				html += this._generateItem('small-item',style,data[i+1]);
			}
			
			if(i+2 < data.length){
				style = "top: 0px; left: "+(420*3*i/7 + 210)+"px";
				html += this._generateItem('height-item',style,data[i+2]);

				width += 210;
			}
			if(i+3 < data.length){
				style = "top: 420px; left: "+(420*3*i/7)+"px";
				html += this._generateItem('large-item',style,data[i+3]);
			}

			if(i+4 < data.length){
				style = "top: 0px; left: "+(420*3*i/7 + 420)+"px";
				html += this._generateItem('large-item',style,data[i+4]);
				if(i+5 < data.length){
					style = "top: 210px; left: "+(420*3*i/7 + 420)+"px";
					html += this._generateItem('big-square-item',style,data[i+5]);
				}

				width += 420;
			}

			if(i+6 < data.length){
				style = "top: 0px; left: "+(420*3*i/7 + 420*2)+"px";
				html += this._generateItem('big-height-item',style,data[i+6]);

				width += 420;
			}
		}

		$('#contentUI').html(html);
		$('#contentUI').css('width',width+'px');

		$('#scrollerUI').css('top',60+(this.height-620)/2+'px');
	},

	enableResize: true,

	resizeWindow: function(){
		
		if(!this.enableResize)
			return;

		var self = this;	
		var height = $(window).height() - 75;
		if(height >= 620 && this.currentNumberRow == 2){
			this.enableResize = false;
			this.currentNumberRow = 3;
			this.changeToThreeRows();

			$('#scrollerUI').css('top',60+(height-620)/2+'px');
			$('#scrollerUI').scrollLeft(0);
			$('#scrollerUI').hide();
			$('#scrollerUI').show();

			setTimeout(function(){
				self.enableResize = true;
			},1500);
		}
		else if(height < 620 && this.currentNumberRow == 3){
			this.enableResize = false;
			this.currentNumberRow = 2;
			this.changeToTwoRows();

			$('#scrollerUI').css('top',60+30+'px');
			$('#scrollerUI').scrollLeft(0);
			$('#scrollerUI').hide();
			$('#scrollerUI').show();

			setTimeout(function(){
				self.enableResize = true;
			},1500);
		}
		else if(this.currentNumberRow == 3){
			$('#scrollerUI').css('top',60+(height-620)/2+'px');
		}
	},

	changeToThreeRows: function(){
		var blocks = $('#contentUI .block');
		var numberItems = blocks.length;
		var width = 0;

		for(var i=0;i<numberItems;i+=7){
			blocks.eq(i).css({
				left: (420*3*i/7)+"px"
			});

			width += 210;

			if(i+1 < numberItems){
				blocks.eq(i+1).css({
					left: (420*3*i/7)+"px"
				});
			}
			
			if(i+2 < numberItems){
				blocks.eq(i+2).css({
					left: (420*3*i/7 + 210)+"px"
				});

				width += 210;
			}
			if(i+3 < numberItems){
				blocks.eq(i+3).css({
					top: '420px',
					left: (420*3*i/7)+"px"
				});
			}
			if(i+4 < numberItems){
				blocks.eq(i+4).css({
					top: '0px',
					left: (420*3*i/7 + 420)+"px"
				});

				if(i+5 < numberItems){
					blocks.eq(i+5).css({
						top: '210px',
						left: (420*3*i/7 + 420)+"px"
					});
				}	

				width += 420;	
			}

			if(i+6 < numberItems){
				blocks.eq(i+6).css({
					top: '0px',
					left: (420*3*i/7 + 420*2)+"px"
				});

				blocks.eq(i+6).removeClass('big-square-item').addClass('big-height-item');

				width += 420;
			}
		}

		$('#contentUI').css('width',width+'px');
	},

	changeToTwoRows: function(){
		var blocks = $('#contentUI .block');
		var numberItems = blocks.length;
		var width = 0;

		for(var i=0;i<numberItems;i+=7){
			blocks.eq(i).css({
				left: (420*4*i/7)+"px"
			});

			width += 210;

			if(i+1 < numberItems){
				blocks.eq(i+1).css({
					left: (420*4*i/7)+"px"
				});
			}
			
			if(i+2 < numberItems){
				blocks.eq(i+2).css({
					left: (420*4*i/7 + 210)+"px"
				});

				width += 210;
			}
			if(i+3 < numberItems){
				blocks.eq(i+3).css({
					top: '0px',
					left: (420*4*i/7 + 420)+"px"
				});

				if(i+4 < numberItems){
					blocks.eq(i+4).css({
						top: '210px',
						left: (420*4*i/7 + 420)+"px"
					});
				}

				width += 420;
			}

			if(i+5 < numberItems){
				blocks.eq(i+5).css({
					top: '0px',
					left: (420*4*i/7 + 420*2)+"px"
				});

				width += 420;	
			}

			if(i+6 < numberItems){
				blocks.eq(i+6).css({
					top: '0px',
					left: (420*4*i/7 + 420*3)+"px"
				});

				blocks.eq(i+6).addClass('big-square-item').removeClass('big-height-item');

				width += 420;
			}
		}

		$('#contentUI').css('width',width+'px');
	}

}

$(document).ready(function(){
	App.init();
})

