/*****************************************************************
		--- > Bosch-PT Related Accessory Builder | dsp 20100331
*****************************************************************/
dom.jquery142(document).ready (function () {
		
	/*inital trigger to build up the DOM */
	dom.jquery142(relAccTrigger).one ('click', function () {
		initRelAccBuilder();										   
	});
	
	initRelAccBuilder = function () {
		
		/* preloader DOM */
		generateInitRelAccContent = function () {
			createInitRelAccContent = '';
			createInitRelAccContent += '<div id="relAccPagerPrev" class="relAccPager prev"><a>&nbsp;</a></div>';
			createInitRelAccContent += '<div class="relAccContent" style="left:auto;">';
			createInitRelAccContent += '	<div id="relContainer" class="relAccContainer">';
			createInitRelAccContent += '		<div id="ajLoading"><p><img src="res/ajax-loader.gif" alt="" /></p></div>';
			createInitRelAccContent += '		<div class="relAccBox" style="display:none;"></div>	';							
			createInitRelAccContent += '	</div>';
			createInitRelAccContent += '</div>';
			createInitRelAccContent += '<div id="relAccPagerNext" class="relAccPager next"><a>&nbsp;</a></div>';
			dom.jquery142(createInitRelAccContent).appendTo("#relAcc");
      dom.jquery142('#relAccHeadline').css('display','block');
			dom.jquery142('#relAcc').css('display','block');
		};
	
		generateInitRelAccContent(); // init preloader DOM
		
		
		/***********************************************
			--- > Default Vars
		***********************************************/
			animationStep = 3; // number of products to step
			animateStepLeft = animationStep * dom.jquery142('.relAccBox').outerWidth(true); // animation step in px
			animateStop = 0;
			animateMaxPrev = 0; // left animation stop in px
			animateMaxNext = 0; // right animation stop in px
			animateEasingMethod = 'easeOutQuad';
			animateDuration = 500;
			// calc for right animation stop in px
			calcAnimateMaxNext = function () {
				dom.jquery142('.relAccBox').each(function () {
					animateMaxNext += dom.jquery142(this).outerWidth(true);
				});
				animateMaxNext = animateMaxNext - animateStepLeft;
				animateMaxNext = animateMaxNext * -1; // right animation stop in px							
			};
									
		
		/***********************************************
			--- > AJAX Calls/Returns/Handles/Parses 
		***********************************************/
			/* AJAX: Get HTML  Related Accessory Content */
			ajaxCall_RelAccContent = function () {
				dom.jquery142.ajax({
					dataType: "json",
					data: {"ccat_id":ccat_id, "productIDs":object_id, "locale":locale},
					type: "GET",
					url: ajaxURL_RelAccContent,
					success: function(jsonData) {
						ajaxParse_RelAccContent(jsonData);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						ajaxHandle_Error(XMLHttpRequest, textStatus, errorThrown);
					}
				 });
			};
								
			/* AJAX: Parse json data and inject it to DOM */
			ajaxParse_RelAccContent = function (jsonData) {
				domChange_clearRelAccContainer();
				if(jsonData){
          prodLabel = jsonData.prod.prodLabel;
          prodImg = jsonData.prod.prodImg;
          prodLink = jsonData.prod.prodLink;
          prodPrice = jsonData.prod.prodPrice;
          labelPrice = jsonData.labelPrice;
          labelCurrency = jsonData.labelCurrency;

          for (i=0; i<prodLabel.length; i++) {
            createAccContentBox = '';
            createAccContentBox += '<div class="relAccBox">';
            createAccContentBox += '	<div class="imgBox"><a rel="noindex,nofollow" target="_blank" href="'+prodLink[i].link+'" target="_blank" class="word_wrap relAccThickbox"><img class="prod" src="'+prodImg[i].image+'" alt="" /></a></div>';
            createAccContentBox += '	<p class="link"><a rel="noindex,nofollow" target="_blank" href="'+prodLink[i].link+'" target="_blank" class="word_wrap relAccThickbox">'+prodLabel[i].label+'</a></p>';
            if (prodPrice[i].price != null && prodPrice[i].price.length > 0) {
              createAccContentBox += '	<p class="price" style="color: #00664A;">'+labelPrice+':&nbsp;'+labelCurrency+'&nbsp;'+prodPrice[i].price+'</p>';
            }
            createAccContentBox += '</div>';
            dom.jquery142(createAccContentBox).appendTo("#relContainer");
          };
          
        }else{
          dom.jquery142('#relAccHeadline').css('display','none');
          dom.jquery142('#relAcc').css('display','none');
        }
				initAfterAjaxSuccess();
				
			};
			
			/* AJAX: Rebuild HTML Navi right */	
			ajaxHandle_Error = function (XMLHttpRequest, textStatus, errorThrown) {
				//dom.jquery142('#ajLoading p').html('Error while loading data' + '<br />' + 'XMLHttpRequest: ' +XMLHttpRequest+ '<br />' + 'textStatus: ' +textStatus+ '<br />' + 'errorThrown: ' + errorThrown);
				dom.jquery142('#ajLoading p').html('Error while loading data');
			};	
		
		
		
		
		/***********************************************
			--- > DOM Changes 
		***********************************************/
			
			
			updateAniSlider = function () {
				animateStop = 0;
				updatePager();
			};
			
			/* DOM Change: Clean Right Navi HTML */
			domChange_clearRelAccContainer = function () {
				dom.jquery142('#relContainer > *').remove();
			};
			
			
			updatePager = function () {
				if ((dom.jquery142('.relAccContainer').position().left >= animateMaxPrev)) {
					pagerPrevInactive();
				}									
				else {
					pagerPrevActive();
				};
				if ((dom.jquery142('.relAccContainer').position().left <= animateMaxNext)) {
					pagerNextInactive();													
				}									
				else {
					pagerNextActive();
				};
			};
			
			
			
			animateLeft = function () {
				// no animation (animation is in progress)
				if (!animateStop) {
					if ((dom.jquery142('.relAccContainer').position().left >= animateMaxPrev)) {
						
					}
					else {
						pagerPrevActive();
						animateStop = 1;
						/*
						dom.jquery142('.relAccContainer').animate ({
							left: '+='+animateStepLeft
						}, 500, function() {
							// animation complete
							animateStop = 0;
							updatePager();
						});	
						*/
						dom.jquery142('.relAccContainer').animate (
							{ left:'+='+animateStepLeft}, 
							{duration: animateDuration, easing: animateEasingMethod, complete: updateAniSlider}
						);
						//dom.jquery142('#lalalaundtestundso').animate({left:'+='+animateStepLeft}, {duration: 1000, easing: 'easeOutBounce'});
					};
				};
			};
			
			animateRight = function () {
				// no animation (animation is in progress)
				if (!animateStop) {
					if ((dom.jquery142('.relAccContainer').position().left <= animateMaxNext)) {
						pagerNextInactive();													
					}
					else {
						pagerNextActive();
						animateStop = 1;
						
						/*
						dom.jquery142('.relAccContainer').animate ({
							left: '-='+animateStepLeft
						}, 500, function() {
							// animation complete
							animateStop = 0;
							updatePager();
						});
						*/
						dom.jquery142('.relAccContainer').animate (
							{ left:'-='+animateStepLeft}, 
							{duration: animateDuration, easing: animateEasingMethod, complete: updateAniSlider}
						);
					};
				};
			};
			
			pagerPrevActive = function () {
				dom.jquery142('#relAccPagerPrev').removeClass('inactive');
			};
			pagerNextActive = function () {
				dom.jquery142('#relAccPagerNext').removeClass('inactive');
			};
			pagerPrevInactive = function () {
				dom.jquery142('#relAccPagerPrev').addClass('inactive');
			};
			pagerNextInactive = function () {
				dom.jquery142('#relAccPagerNext').addClass('inactive');
			};
			pagerPrevHover = function () {
				dom.jquery142('#relAccPagerPrev').addClass('hover');
			};
			pagerNextHover = function () {
				dom.jquery142('#relAccPagerNext').addClass('hover');
			};
			pagerPrevOut = function () {
				dom.jquery142('#relAccPagerPrev').removeClass('hover');
			};
			pagerNextOut = function () {
				dom.jquery142('#relAccPagerNext').removeClass('hover');
			};
			
		
		
		/***********************************************
			--- > DOM Events 
		***********************************************/
			/* Case: animated carousel required  (if boxes gt 3) */
			
			initClicks = function () {
				if (dom.jquery142('.relAccBox').length > 3) {
					dom.jquery142('#relAccPagerPrev').click(function() {
						animateLeft();	
					});
					dom.jquery142('#relAccPagerNext').click(function() {
						animateRight();
					});	
					
				}								
				/* Case: no carousel required */
				else {
					pagerPrevInactive();
					pagerNextInactive();		
				};
			};							
			
		
		
		/***********************************************
			--- > Inits
		***********************************************/
			
			ajaxCall_RelAccContent();
			initAfterAjaxSuccess = function () {
				calcAnimateMaxNext();
				initClicks();
				updatePager();	
				dom.jquery142('.relAccBox:last').addClass('last');
				tb_init('a.relAccThickbox'); // init thickbox to all a-tags
			};	
		
		
		
	};
	
	
		initRelAccBuilder();
});