var guid = '5c3ce6031572b';	
(function(page) {
	window.onload = function() {
		var paginationVariable = 'pagination pagination-CEG-58193492';
		////////////////////////////////////////////////////////////////////////////////////
		// Helper function => vanilla JS POST requests
		function simplePOST(url, params, cb, args) {
			var request = new XMLHttpRequest();

			request.open('POST', url);

			request.onreadystatechange = function() {
			  if(request.readyState === 4) {
			    if(request.status === 200) { 
		      		passAlong(cb, request.responseText, args);
			    } else {
			    	console.log('ERROR')
			    } 
			  }
			}

			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

			request.send(params);
		}

		////////////////////////////////////////////////////////////////////////////////////
		// Helper function => building HTML elements
		function makeHTMLElement(elem, elemClass, text, attributes) {
			var d = document.createElement(elem);
			d.className = elemClass;
			d.innerHTML = text;

			for(var prop in attributes) {
				d.setAttribute(prop, attributes[prop])
			}

			return d;
		}

		function passAlong(cb, data, args) {
			cb(data, args);
		}

		////////////////////////////////////////////////////////////////////////////////////
		// Pagination Functions
		function changePage(page) {
			var targetURL = 'https://www.constructionequipmentguide.com/_functions/newsAPI.php'
			var dealerParams = 'getDealerNews=1&dealerGUID=5c3ce6031572b&page=' + page;

			// check if .CEG-news-list exists and delete it if so
			// deletes the old one and creates the new one
			var existing = document.querySelector('.CEG-news-list');
			if(existing) {
				existing.parentNode.removeChild(existing);
			}
			simplePOST(targetURL, dealerParams, loadNews, [page])
		}

		// returns array of pages that will be printed
		var pagination = function(current, total){
		    var list = [];
		    var pageLimit = 5;
		    var upperLimit, lowerLimit;
		    var currentPage = lowerLimit = upperLimit = Math.min(current, total);


		    for (var b = 1; b < pageLimit && b < total;) {
		        if (lowerLimit > 1 ) {
		            lowerLimit--; b++; 
		        }
		        if (b < pageLimit && upperLimit < total) {
		            upperLimit++; b++; 
		        }
		    }

		    for (var i = lowerLimit; i <= upperLimit; i++) {
		        if (i == currentPage){
		            list.push({page: i, active: 'yes'})
		            // list.push("["+i+"]");
		        }
		        else{
		            list.push({page: i, active: 'no'})
		        }
		    }
		    return list;
		}

		// News Story Pagination
		var getStoryPagination = function(data,args) {
		    var page = args[0];
	        if(data != 'none') {
	            var obj = JSON.parse(data);
	            var pages = Math.ceil(obj[0].TotalStories / 10);	// total # of pages
	            var pageArray = pagination(Number(page), pages);	// array of pages to print

				// parent pagination ul
	            var ul = makeHTMLElement('ul', paginationVariable, '', {});

	            // First Page
	            var li = makeHTMLElement('li', 'page-item', '', {});
	            var linkAtts1 = {
	            	"data-page": 1
	            }
	            var a = makeHTMLElement('a', 'first page-link', 'First', linkAtts1);
	            a.addEventListener('click', function() { changePage(1)})
	            li.appendChild(a);
	            ul.appendChild(li);


	            // Middle Pages including the active one
	            pageArray.map(function(page) {
	                var liClass = page.active === 'yes' ? 'page-item active' : 'page-item';
	                var li = makeHTMLElement('li', liClass, '', {});
	                // var a = makeHTMLElement('a', 'page-link', page.page, {href: pageBase + page.page});
	                var linkAtts = {
	                	"data-page": page
	                }
	                var a = makeHTMLElement('a', 'page-link', page.page, linkAtts);
	                a.addEventListener('click', function() { changePage(page.page)})
	                li.appendChild(a);
	                ul.appendChild(li);
	            })
	            
	            // Last Page
	            var li2 = makeHTMLElement('li', 'page-item', '', {});
	            var linkAtts2 = {
	            	"data-page": pages
	            }
	            var a2 = makeHTMLElement('a', 'last page-link', 'Last', linkAtts2);
	            a2.addEventListener('click', function() { changePage(pages)})
	            li2.appendChild(a2);
	            ul.appendChild(li2);

	            var list = document.querySelector('.CEG-news-list')
	            list.appendChild(ul)
	        }
		}

		function convertDate(date) {
			var months = ['', 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
			var year = date.slice(0,4);
			var month = months[Number(date.slice(5,7))];
			var day = date.slice(8,10);

			var fullDate = month + " " + day + ", " + year;

			return fullDate;
		}

		////////////////////////////////////////////////////////////////////////////////////
		// Load and build the list of news items
		function loadNews(data, page) {
			var arr = JSON.parse(data);

			// parent class for the news div and its selector
			var uniqDivClass = 'CEG-news-list'
			var uniqSelector = '.' + uniqDivClass;

			// Create div to hold everything
			var d = document.createElement('div');
			d.className = uniqDivClass;

			// Create div to hold all stories
			var ds = makeHTMLElement('div', 'stories-parent', '', {});

			arr.map(function(item) {
				// console.log(item);

				var dateText = convertDate(item.PublishDate);
				var authorText = item.Author ? item.Author : 'CEG Staff';
				authorText = 'By ' + authorText;

				var dateSpan = makeHTMLElement('span', 'date', dateText, {});
				var authorSpan = makeHTMLElement('span', 'author', authorText, {})

				var authorDateLine = makeHTMLElement('div', 'author-date-line', '', {});
				authorDateLine.appendChild(authorSpan);
				authorDateLine.appendChild(dateSpan);
				
				// Headline link
				var e = document.createElement('a')
				e.className = 'news-item';
				e.innerHTML = item.Headline;
				e.setAttribute('href', item.URL);
				e.setAttribute('target', '_blank');
				
				// Snippet from the article
				var snip = document.createElement('div');
				var snipText = item.Snippet
				// remove IMG tag if it exists
				snip.innerHTML = (item.Snippet + '...')
					.replace(/<img .*?>/g, "")
					.replace(/<a .*?>/g, "")
					.replace(/<a\/>/g, "")
					.replace(/<iframe.*<\/iframe>/g, "");
				snip.className = "story-snippet"

				////////////////////////////////////////////////////////////
				// Continue Reading Link
				var cParent = makeHTMLElement('div', 'continue-reading', '');
				var linkText = 'Continue reading at CEG...';
				var cLink = makeHTMLElement('a', 'continue-link', linkText, { href: item.URL, target: "_blank"});
				cParent.appendChild(cLink);
	            var br = makeHTMLElement('br', '', '', {'clear' : 'all'});

				// Text parent div
				var textParent = makeHTMLElement('div', 'text-parent', '', {});
				textParent.appendChild(e)
				textParent.appendChild(authorDateLine);
				textParent.appendChild(snip);
				// textParent.appendChild(cParent);
				

				////////////////////////////////////////////////////////////
				// Continue Reading Link V2
				// var linkText = 'Continue reading at CEG';
				// var cLink = makeHTMLElement('a', 'continue-link', linkText, { href: item.URL, target: "_blank"});


				// var textParent = makeHTMLElement('div', 'text-parent', '', {});
				// textParent.appendChild(e)
				// snip.appendChild(cLink);
				// textParent.appendChild(snip)
				// textParent.appendChild(authorDateLine);
				////////////////////////////////////////////////////////////

				// Image
				if(item.Picture) {
					var img = makeHTMLElement('img', 'story-img', '', {src: item.Picture});	
				} else {
					var noIMG = 'https://www.constructionequipmentguide.com/_artwork/no-image-available.png';
					var img = makeHTMLElement('img', 'story-img', '', {src: noIMG })
				}
				
				var imgParent = makeHTMLElement('div', 'img-parent', '', {});
				imgParent.appendChild(img);

				// Parent for story
				var par = document.createElement('div')
				par.style.padding = "0.5rem;";
				par.className = "story-row";

				par.appendChild(imgParent);
				par.appendChild(textParent);
				par.appendChild(br);
				ds.appendChild(par)				
			});

			// CSS Styling
			var css = uniqSelector + " a.news-item:hover { color: #000 !important; } \n";
			css += uniqSelector + " a.news-item { display: block; color: #111; font-weight: bold; font-size: 22px; text-decoration: none; margin-bottom: 16px; line-height: 26px; font-family: Palatino, sans-serif;} ";
			css += uniqSelector + " .story-snippet { font-family: 'Times New Roman', serif; line-height: 20px; color: #444; \n}";
			css += uniqSelector + " .story-snippet p { padding: 0; margin: 0; }";
			css += uniqSelector + " { max-width: 800px; margin: 0 auto; padding: 4px; }\n";
			css += uniqSelector + " .story-row { padding: 8px; border-bottom: 1px solid #f0f0f0; font-family: sans-serif; text-decoration: none; color: black; vertical-align: top}\n";
			css += uniqSelector + " .story-row:hover { background-color: #fcfafd; } ";
			css += uniqSelector + " a { text-decoration: none; }";
			css += uniqSelector + " a.continue-link:hover { font-weight: bold; }";
			css += uniqSelector + " .continue-reading { margin-top: 1rem; }";

			////////////////////////////////////////////////////////////
			// // Link V2
			// css += uniqSelector + " .story-snippet { position: relative; }"
			// css += uniqSelector + " a.continue-link { display: span; position: absolute; right: 0; bottom: -3px; }";

			////////////////////////////////////////////////////////////
			css += uniqSelector + " .img-parent { display: inline-block; text-align: center; padding-left: 2px; width: 200px; vertical-align: top; }"
			css += uniqSelector + " .img-parent img { max-width: 95%; vertical-align: top; max-height: 175px;}"
			css += uniqSelector + " .text-parent { display: inline-block; width: calc(100% - 210px); padding-left: 6px;}";
			css += uniqSelector + " .text-parent .author-date-line { margin-top: 8px; }";
			css += uniqSelector + " .text-parent .author-date-line span { font-size: 12px; display: inline-block; padding-right: 30px;  }";
			css += uniqSelector + " .text-parent .author { font-weight: bold; }";
			css += uniqSelector + " .text-parent .date {text-transform: uppercase; color: #333; font-size: 14px; font-family: monospace; }";
			css += uniqSelector + " ul." + paginationVariable + " { list-style: none; text-align: center; border-radius: 4px; font-family: Verdana; margin-top: 16px;} ";
			css += uniqSelector + " ul." + paginationVariable + " li.page-item { border: 1px solid #dee2e6; display: inline-block; padding: 8px 12px; } ";
			css += uniqSelector + " ul." + paginationVariable + " li a { font-size: 14px; cursor: pointer; display: block; width: 100%;}";
			css += uniqSelector + " ul." + paginationVariable + " li.page-item.active { background-color: #0984e3; border-color: #0984e3;}";
			css += uniqSelector + " ul." + paginationVariable + " li.page-item.active a { color: #fff; }";
			css += uniqSelector + " ul." + paginationVariable + " li:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }"
			css += uniqSelector + " ul." + paginationVariable + " li:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }"
			css += "\n @media screen and (max-width: 600px){ ";
			css += uniqSelector + " .img-parent { display: block; width: 100%; text-align: center; margin-bottom: 16px;}";
			css += uniqSelector + " .img-parent img { max-width: 375px; max-height: 350px; }";
			css += uniqSelector + " .text-parent { display: block; width: 100%; }";
			css += "}"
			// css += uniqSelector + " ";
			// css += uniqSelector + " ";
			// css += uniqSelector + " ";
			var responsive = document.createElement('meta');
			responsive.name = 'viewport';
			responsive.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0';
			var style = document.createElement('style');
			// style.appendChild(document.createTextNode(css));
			document.getElementsByTagName('head')[0].appendChild(style);
			document.getElementsByTagName('head')[0].appendChild(responsive);

			
			var s = document.getElementById('CEG-loadnews');
			var p = s.parentNode;
			


			d.appendChild(ds);
			p.insertBefore(d, s)

			
			// Story Pagination
			// var pageURL = 'http://production-dev:8888/_functions/newsAPI.php';
			var pageURL = 'https://www.constructionequipmentguide.com/_functions/newsAPI.php';
			var pageParams = 'getStoriesCount=1&dealerGUID=5c3ce6031572b&page=' + page;
			simplePOST(pageURL, pageParams, getStoryPagination, [page]);


		}

			var cssLink = makeHTMLElement('link', '', '', {
				rel: 'stylesheet',
				// href: '/_css/ceg_equipment.css'
				// href: '/_css/ceg_news_api.css'
				href: 'https://www.constructionequipmentguide.com/_css/ceg_news_api.css'
			})
			document.head.appendChild(cssLink);
		

		////////////////////////////////////////////////////////////////////////////////////
		////////////////////////////////////////////////////////////////////////////////////
		// Initial Params and Loading
		// var targetURL = 'http://production-dev:8888/_functions/newsAPI.php';
		var targetURL = 'https://www.constructionequipmentguide.com/_functions/newsAPI.php';
		var dealerParams = 'getDealerNews=1&dealerGUID=5c3ce6031572b&page=1';

		simplePOST(targetURL, dealerParams, loadNews, [1])
	}
})(1);

// var request = new XMLHttpRequest();

		// request.onreadystatechange = function() {
		//   if(request.readyState === 4) {
		//     if(request.status === 200) { 
	 //      		// console.log(request.responseText);
	 //      		loadNews(request.responseText);
		//     } else {
		//     	console.log('ERROR')
		//     } 
		//   }
		// }
				
		
		// request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		
		// request.send("dealerGUID=5c3ce6031572b&page=1");