var sliderLanguage;
$(function () {
	
	$('#scroll_content').css("width",($('.highlight_item').length)*250);
	$.getJSON(AJAX_DIR+'ajax.languageProvider.php?module=slider', function(data) {
		sliderLanguage = data;
		var screen_button = document.createElement("li");
		var tv_and_audio_button = document.createElement("li");
		screen_button.id="screen";
		$(screen_button).html(sliderLanguage.screen);
		tv_and_audio_button.id="tvandaudio";
		$(tv_and_audio_button).html(sliderLanguage.tv_and_audio);
		$(screen_button).insertAfter("#highlights_head ul li#beamer");
		
		
		if ( $("h1 a").attr("href") == "http://www.Beamershop24.net" || $("h1 a").attr("href") == "http://www.Beamershop24.nl" ) {
			$(tv_and_audio_button).insertAfter("#highlights_head ul li#screen");
		}

		$("#highlights_head ul li").click(
				  function () {
					$("#highlights_head li").removeClass("active");
				    $(this).addClass("active");
				    reloadBargains(this.id);
				    
				});
		//set max width of home select li
		var maxLiWidth ='0';
		$("#highlights_head li").each(function(){
			maxLiWidth =($(this).width()> maxLiWidth)?$(this).width():maxLiWidth;
		});
		$("#highlights_head li").css('width',maxLiWidth);
		
		buildSlider();
		
	});
	
}); 

function buildSlider(){
	
	var avalaibleContent;
	var scrollHandler = document.createElement('div');
	var barPosition;
	var scrollPattern = document.createElement('div');
	var scrollBG = document.createElement('div');
	var position;
	var scrollBar = $('.scroll_bar');
		scrollBar.html('');
	var scrollContent = $('#scroll_content'); 
	var items = $('.highlight_item').length;
	var actualItem=1;
	$('#scroll_content').css("width",($('.highlight_item').length)*250);
	avalaibleContent = ($('.highlight_item').length*250)-750;	
	scrollContent.css('margin-left','0px');
	//alert(avalaibleContent);
	scrollPattern.className = 'scrollPattern';
	scrollBG.className ='scrollBG';
	scrollHandler.className = 'scrollHandler';
	$(scrollHandler).html( actualItem+" "+sliderLanguage.till+" "+(actualItem+2)+" "+sliderLanguage.from+" "+items );
		$(scrollHandler).draggable({
			axis: 'x',
			containment: '.scrollPattern',
			scroll: false,
			drag: function() {
				barPosition = $(scrollHandler).position().left-144 ;
				var ratio = barPosition/(scrollBar.width()-107-48);
				//$(scrollHandler).html( ratio );
				actualItem = Math.round((( ratio*avalaibleContent ) / 250)+1);
				$(scrollContent).css('margin-left',(-1*ratio*avalaibleContent)+'px');
				$(scrollHandler).html( actualItem+" "+sliderLanguage.till+" "+(actualItem+2)+" "+sliderLanguage.from+" "+items );
			}  
		});
	var leftButton = document.createElement('img');
		leftButton.src = 'templates/b24/img/layout/scrollbar_arrow_left.png';
		
		$(leftButton).click(function(){
			position = parseInt(($(scrollContent).css('margin-left').replace("px","")));
			//alert(position);
			itemratio = (682/items);
			barPosition = $(scrollHandler).position().left-144 ;
			if ( position>=-750){
				 $(scrollContent).css('margin-left','0');
				 $(scrollHandler).css('left','0');
			} else {
				$(scrollContent).css('margin-left',(position+750-(position%250))+'px');
				
				$(scrollHandler).css('left',(barPosition-(itemratio*3))+'px');
			}
			barPosition = $(scrollHandler).position().left-144 ;
			ratio = barPosition/(scrollBar.width()-107-48);
			actualItem = Math.round((( ratio*avalaibleContent ) / 250)+1);
			$(scrollHandler).html( actualItem+" "+sliderLanguage.till+" "+(actualItem+2)+" "+sliderLanguage.from+" "+items );
			//alert($(scrollContent).css('margin-left'));

				
		});
	
	var rightButton = document.createElement('img');
		rightButton.src = 'templates/b24/img/layout/scrollbar_arrow_right.png';
		
		$(rightButton).click(function(){
			position = ($(scrollContent).css('margin-left').replace("px",""));
			//alert(position);
			itemratio = (682/items);
			barPosition = $(scrollHandler).position().left-144 ;
			//alert(((scrollContent).width()-750)*-1);
			//alert($(scrollContent).width());
			//alert(parseInt(position)+parseInt(($(scrollContent).width())-750));
			if (parseInt(position)+parseInt(($('#scroll_content').width())-750)<=750){
				//alert(parseInt(position)+parseInt(($('#scroll_content').width())-750)); 
				 $(scrollContent).css('margin-left',($(scrollContent).width()-750)*-1+'px');
				 $(scrollHandler).css('left','575px');
			} else {
				$(scrollContent).css('margin-left',(position-750-(position%250))+'px');
				$(scrollHandler).css('left',(barPosition+(itemratio*3))+'px');
				//$(scrollHandler).left(ratio+750);
			}
			barPosition = $(scrollHandler).position().left-144 ;
			ratio = barPosition/(scrollBar.width()-107-48);
			actualItem = Math.round((( ratio*avalaibleContent ) / 250)+1);
			$(scrollHandler).html( actualItem+" "+sliderLanguage.till+" "+(actualItem+2)+" "+sliderLanguage.from+" "+items );
			
			
		});
		
	scrollBar.append(leftButton);	
	scrollBar.append(scrollPattern);
//	alert($(scrollPattern).position().left);
//	alert($(scrollPattern).position().top);
	scrollPattern.appendChild(scrollBG);
	$(scrollBG).css('left',($(scrollBar).position().left)+24);
	$(scrollBG).css('top',$(scrollBar).position().top);
	scrollPattern.appendChild(scrollHandler);
	scrollBar.append(rightButton);
	
}


function useHandler(left_position){
	$('.scrollHandler').html( );
}



function scrollBargains(reloadeing) {
		//scrollpane parts
		var scrollPane = $('#highlights_body');
		var scrollContent = $('#scroll_content');
		
		//build slider
		var scrollbar = $("#highlights_scrollbar").slider({
			slide:function(e, ui){
				if( scrollContent.width() > scrollPane.width() ){scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px');}
				else {scrollContent.css('margin-left', 0);}
			}
		});
		
		//append icon to handle
		var handleHelper = scrollbar.find('.ui-slider-handle')
		.mousedown(function(){
			scrollbar.width( handleHelper.width() );
		})
		.mouseup(function(){
			scrollbar.width( '100%' );
		})
		.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
		.wrap('<div class="ui-handle-helper-parent"></div>').parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css('overflow','hidden');
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar(){
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
			scrollbar.find('.ui-slider-handle').css({
				width: handleSize,
				'margin-left': -handleSize/2
			});
			handleHelper.width('').width( scrollbar.width() - handleSize);
		}
		
		//reset slider value based on scroll content position
		function resetValue(){
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
			var percentage = Math.round(leftVal / remainder * 100);
			scrollbar.slider("value", percentage);
		}
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent(){
				var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
				var gap = scrollPane.width() - showing;
				if(gap > 0){
					scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
				}
		}
		
		//change handle position on window resize
		$(window)
		.resize(function(){
				resetValue();
				sizeScrollbar();
				reflowContent();
		});
		if (reloadeing==1){
			sizeScrollbar();
			reflowContent();
		};
		//init scrollbar size
		setTimeout(sizeScrollbar,10);//safari wants a timeout
};


function reloadBargains(product_type){
	$('#scroll_content').html('<img src="templates/b24/javascript/wait.gif" alt="wait" />');

	$.getJSON(AJAX_DIR+'ajax.productBargains.php?get='+product_type, function(data) {

		$('#scroll_content').html('');
		var i;
		for (i = 0; i <data.length; i++){
			//alert(i);
			$("#scroll_content").append(getNewItem(data[i]));
			//$("#scroll_content").append(getNewItem(data[i]));
		}
		$('#scroll_content').css("width",(i*250));
		
		if (data.length<=3) {
			$('.scroll_bar').hide();
		} else {
			$('.scroll_bar').show();
		}
		buildSlider();
		
		
	});
    
};


function getNewItem(product){
	var item = document.createElement("div");
	var manufacturer_img;
	var products_name_div = document.createElement("div");
	var products_name = document.createElement("h3");
	var product_img = document.createElement("img");
	var product_img_div = document.createElement("div");
	var price = document.createElement("div");
	var shipping = document.createElement("small");
	var avaialable = document.createElement("table");
	var scope_div = document.createElement("div");
	var feature_table = document.createElement("table");
	
	$(item).addClass("highlight_item box_shadow");
	
	
	
	
	if (product.manufacturer.manufacturers_image_grey!='images/manufacturers/grey/'){
		manufacturer_img = document.createElement("img");
		$(manufacturer_img).addClass("manufacturer");
		manufacturer_img.src = product.manufacturer.manufacturers_image_grey;
	} else {
		manufacturer_img = document.createElement("p");
		$(manufacturer_img).addClass("manufacturer");
		$(manufacturer_img).html(product.manufacturer.manufacturer);
	}
	item.appendChild(manufacturer_img);
	
	$(products_name_div).addClass("name");
	var name = html_entity_decode(product.products_name);
	//alert(product_type);
	if (product.products_name.length >= 42 && product.products_type_id != 2 ){
		name = product.products_name.substring(0,38)+" &hellip;";
	}

	
	$(products_name).html(name);
	products_name_div.appendChild(products_name);
	
	var link = document.createElement("a");
	$(link).attr("href",product.link);
	link.appendChild(products_name_div);
	
	item.appendChild(link);
	if(product.features){
		//alert("feat");
		var feature;
		$.each(product.features, function(index, value) {
			feature  = document.createElement("tr");
			$(feature).html('<th>'+index + ':</th><td> ' + value+ '</td>');
			feature_table.appendChild(feature);
		});
		item.appendChild(feature_table);
	} else if (product.short_description){
		var short_description  = document.createElement("p");
		$(short_description).addClass("spacer");
		var short_desc_val = html_entity_decode(product.short_description);
		if (product.short_description.length >= 90){
			short_desc_val = product.short_description.substring(0,87)+" &hellip;";
		}
		
		short_description.innerHTML = short_desc_val;
		item.appendChild(short_description);
	} else {
		var spacer  = document.createElement("p");
		$(spacer).addClass("spacer");
		item.appendChild(spacer);
	}
	
	var imglink = document.createElement("a");
	$(imglink).attr("href",product.link);
	$(product_img_div).addClass("productimage");
	product_img.src = product.products_image;
	product_img_div.appendChild(product_img);
	imglink.appendChild(product_img_div);
	item.appendChild(imglink);

	if (product.scopes){
		$.each(product.scopes, function(index, value) {
			var scope  = document.createElement("span");
			$(scope).addClass("scopes");
			scope.innerHTML = " "+index+" ";
			scope_div.appendChild(scope);
		});
		var i =0;
		$.each(product.scopes, function(index, value) {
			i++;
			
			var scope  = document.createElement("span");
			$(scope).addClass("scopes");
			var inner = document.createElement("span");
			$(inner).addClass('suitability');
			var colored = document.createElement("span");
			$(colored).addClass("percent scope"+i);
			$(colored).attr("title",sliderLanguage.suitability+": "+value+"%"+" "+index);
			$(colored).css("width",value+"%");
			scope.appendChild(inner);
			inner.appendChild(colored);
			
			scope_div.appendChild(scope);
		});
	}
	item.appendChild(scope_div);
	$(price).addClass("price");
        if(product.products_is_variant_parent == '1'){
            price.innerHTML = sliderLanguage.TEXT_VARIANT_PRICE+" "+product.PriceWithTax+" *";
        } else {
            price.innerHTML = product.PriceWithTax+" *";
        }
	
	item.appendChild(price);
	
	shipping.innerHTML = product.shipping_link;

	item.appendChild(shipping);
	var avtr = document.createElement('tr');
        var avth = document.createElement('th');
        var avtd = document.createElement('td');
        if (product.available.id == 6){
            $(avtd).addClass("onstock");
        }
        avtd.innerHTML = product.available.name;
        avth.innerHTML = sliderLanguage.available;
        avtr.appendChild(avth);
        avtr.appendChild(avtd);
	//avaialable.innerHTML = '<tr><th>'+sliderLanguage.available+':</th><td>'+product.available.shipping_status_name+'</td></tr>';
        //avaialable.innerHTML = 'hello';
        avaialable.appendChild(avtr);
	item.appendChild(avaialable);
	return item;
};