/*********** Media lib ***********/
var MEDIA = new Object();
MEDIA.description = 'Simple lib of media that contains arrays of concrete media type and allows to render image bar according to sku.';

/** 
* Bean description. 
* This bean has all media properties to operate with it in js more dynamically.
*/
MEDIA.bean = function (id, attr1_id, attr2_id, attr3_id, row_id, media_id, media_desc, media_type, filename, imageSize, image_height, image_width, imageType, i18n, missing_flg) {
    this.id = id;
	this.attr1_id = attr1_id;
	this.attr2_id = attr2_id;
	this.attr3_id = attr3_id;
	this.row_id = row_id;
	this.media_id = media_id;
	this.media_desc = media_desc;
	this.media_type = media_type;
	this.filename = filename;
	this.imageSize = imageSize;
	this.image_height = image_height;
	this.image_width = image_width;
	this.imageType = imageType;
	this.i18n = i18n;
	this.missing_flg = missing_flg;
}

/**
* This bean contains information about registered media arrays and name of media.
* MEDIA.arrays.allMedias can register this bean. Usuful to use allMedias array to init media, etc.	
*/
MEDIA.arrayBean = function (name, normalMediaArray, thumbnailMedialArray) {
    this.name = name;
	this.normalMediaArray = normalMediaArray;
	this.thumbnailMedialArray = thumbnailMedialArray;
}

// Media arrays
MEDIA.arrays = new Object();	//main arrays namespace to contain all media arrays
MEDIA.arrays.allMedias = new Array();	//all registered medias

// Global variable to control current selected media bean.
var currentMediaBean = null;

/** 
* Media image namespace.
* For now we do not use grouped namespaces, because js functions do not perform concrete namespace logic. 	
*/
MEDIA.image = {};

/**
* Look for a first media.bean in the array of media by sku. 
* This function does not validate if media.bean is undefined.
*/
MEDIA.image.findMediaBySku = function (mediaArray, attr1_id, attr2_id, attr3_id) {
	var resultMedia = null;

    for(i = 0; i < mediaArray.length; i++) {
		var mediaBean = mediaArray[i];
		
		if (attr1_id == mediaBean.attr1_id && attr2_id == mediaBean.attr2_id && attr3_id == mediaBean.attr3_id)
		{
			resultMedia = mediaBean;
			break;
		}
   }

	return resultMedia;
}

/**
* Look for a media.bean in the array of media by id. 
* This function does not validate if media.bean is undefined.
*/
MEDIA.image.findMediaById = function (mediaArray, id) {
	var resultMedia = null;

    for(i = 0; i < mediaArray.length; i++) {
		var mediaBean = mediaArray[i];
		
		if (id == mediaBean.id)
		{
			resultMedia = mediaBean;
			break;
		}
	}

	if (resultMedia == null) {
		alert("Media is not found by id = " + id);
		// or we can get first element from array
	}
	
	return resultMedia;
}

/**
* This function updates main sku media (big picture) and prepare media according to selected sku.
* Set selected first element of thumbnail arrays. This operation is performed by hand in current implementation. 
* In the future we can register arrays, so the first selected operation will be performed automatically.
*/
MEDIA.image.loadMedia = function () {
	var attr1_id = get_attr_value(1);
	var attr2_id = get_attr_value(2);
	var attr3_id = get_attr_value(3);
	
	var allMediaArrays = MEDIA.arrays.allMedias;
	
   	if (allMediaArrays.length > 0) {
		var firstMediaArrayBean = allMediaArrays[0];
		if (firstMediaArrayBean.normalMediaArray.length == 0) {
			// we should not perfrom media view js, if we do not have arrays of first media from server logic
			return;
		} else {
			MEDIA.image.loadMediaBySku("bigImage", firstMediaArrayBean.normalMediaArray, attr1_id, attr2_id, attr3_id);
		}
		
	    for(i = 0; i < allMediaArrays.length; i++) {
			var mediaArrayBean = allMediaArrays[i]; 
			MEDIA.image.selectFirstThumbnailElement(mediaArrayBean.thumbnailMedialArray, mediaArrayBean.name);
		}
	}
}

/**
* Retrieve first media bean from array and select one if exists
*/
MEDIA.image.selectFirstThumbnailElement = function (array, preffixId) {
	if (array.length > 0)
	{
		var media = array[0]; 
		var  mediaId = MEDIA.image.prepareId(preffixId, media); 
		var  mediaComponent = $(mediaId);
		mediaComponent.style.border = MEDIA.image.selectedStyle;
	}

}

/**
* Find and load media by sku.
*/
MEDIA.image.loadMediaBySku = function (imageId, normalArray, attr1_id, attr2_id, attr3_id) {
	var mediaBean = MEDIA.image.findMediaBySku(normalArray, attr1_id, attr2_id, attr3_id); 
	currentMediaBean = mediaBean;

	// update media component
	if (mediaBean === undefined) {
		// alert("Media is undefined");  // SKU no exists. Do nothing!
	} else {
		var normalMedia = $(imageId);
		normalMedia.src = MEDIA.image.mediaDir + mediaBean.filename;
		normalMedia.width = mediaBean.image_width;
		normalMedia.height = mediaBean.image_height;
		normalMedia.title = mediaBean.media_desc;
		normalMedia.setStyle(normalMedia, MEDIA.image.noSelectedStyle);
	}
}


/**
* Find and load media by id.
*/
MEDIA.image.loadMediaById = function (imageId, array, normalArray, id) {
	var thumbnailMediaBean = MEDIA.image.findMediaById(array, id);
	
	var mediaBean = MEDIA.image.findMediaByAttrs(normalArray, thumbnailMediaBean);
		
	if (mediaBean == null)
	{
		alert("Media is not found by id = " + id);
		// or load first media of first array
	}
	
	currentMediaBean = mediaBean;

	// update media component
	if (mediaBean === undefined) {
		// alert("Media is undefined");  // SKU no exists. Do nothing!
	} else {
		var normalMedia = $(imageId);
		normalMedia.src = MEDIA.image.mediaDir + mediaBean.filename;
		normalMedia.width = mediaBean.image_width;
		normalMedia.height = mediaBean.image_height;
		normalMedia.title = mediaBean.media_desc;
		normalMedia.setStyle(normalMedia, MEDIA.image.noSelectedStyle);
	}
}

/**
* Look for media bean in arrays by attributes of source media bean
*/
MEDIA.image.findMediaByAttrs = function (array, mediaBean) {
    var foundMedia = null;
    
    for(i = 0; i < array.length; i++) {
		var bean = array[i]; 
		if (bean.attr1_id == mediaBean.attr1_id 
			&& bean.attr2_id == mediaBean.attr2_id 
			&& bean.attr3_id == mediaBean.attr3_id
			&& bean.row_id == mediaBean.row_id
			&& bean.media_id == mediaBean.media_id)
		{
			foundMedia = bean;
			break;
		}
	}

	return foundMedia;
}

MEDIA.image.prepareId = function(preffixId, mediaBean) {
	var resultMediaId = preffixId + mediaBean.id; 
	return resultMediaId;
}

MEDIA.image.changeImage = function (imgId, imgName) {
	$(imgId).src = MEDIA.image.ctxtPath + "/images/navigation/" + imgName;
}

MEDIA.image.onOverChangeImage = function (img) {
	img.style.cursor = "pointer";
	//Effect.Grow(img.id);
	//new Effect.Scale(img.id, 110, { scaleFromCenter: true });
	
	// use pulsate and opacity effects in pair to avoid a 'dimmed' effect.
	new Effect.Pulsate(img.id, { pulses: 1, duration: 0.7, from: 0.5 });
	new Effect.Opacity(img.id, { from: 0.5, to: 1 });
}

MEDIA.image.onOutChangeImage = function (img) {
	//new Effect.Scale(img.id, 100, { scaleFromCenter: true });
//	setInterval(function() {
//  		//alert(1);
//  		img.src = 'http://localhost:8080/MediaImport/1030_(Ingen)_Q1_(Ingen)_search_thumbnail.jpg';
//  		//new Effect.pulsate('my_div', {duration: 1})
//
//	}, 700);
	
	//normalMedia.width = mediaBean.image_width;
	//normalMedia.height = mediaBean.image_height;
	//normalMedia.title = mediaBean.media_desc;
	
}

MEDIA.image.nextSelectedMedia = function (thumbnailContainerId, imageId, array, normalArray, prefixId) {
	var existId = false;
    for(i = 0; i < array.length; i++) {
		var iteratedMedia = array[i]; 
		var iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
		var iteratedMediaComponent = $(iteratedMediaId);
		
		if (MEDIA.image.selectedBorderBottomColor == iteratedMediaComponent.style.borderBottomColor && i < array.length) {
			iteratedMediaComponent.style.border = MEDIA.image.noSelectedStyle;
			existId = true; 
		}
		
		if (existId) {
			if (i == array.length - 1) {
				iteratedMedia = array[0]; 
				iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
				iteratedMediaComponent = $(iteratedMediaId);
				iteratedMediaComponent.style.border = MEDIA.image.selectedStyle;
				MEDIA.image.loadMediaById(imageId, array, normalArray, iteratedMedia.id);
			} else {
				iteratedMedia = array[i + 1]; 
				iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
				iteratedMediaComponent = $(iteratedMediaId);
				iteratedMediaComponent.style.border = MEDIA.image.selectedStyle;
				MEDIA.image.loadMediaById(imageId, array, normalArray, iteratedMedia.id);
			}
			
			MEDIA.image.scrollThumbnail(thumbnailContainerId, i * iteratedMedia.image_width + i)
			break;
		}
   }
}

MEDIA.image.prevSelectedMedia = function (thumbnailContainerId, imageId, array, normalArray, prefixId) {
   	var existId = false;
    for(i = array.length -1; i >= 0; i--) {
		var iteratedMedia = array[i]; 
		var iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
		var iteratedMediaComponent = $(iteratedMediaId);
		
		if (MEDIA.image.selectedBorderBottomColor == iteratedMediaComponent.style.borderBottomColor && i < array.length) {
			iteratedMediaComponent.style.border = MEDIA.image.noSelectedStyle; 
			existId = true;
		}
		
		if (existId) {
			if (i == 0) {
				iteratedMedia = array[array.length - 1]; 
				iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
				iteratedMediaComponent = $(iteratedMediaId);
				iteratedMediaComponent.style.border = MEDIA.image.selectedStyle;
				MEDIA.image.loadMediaById(imageId, array, normalArray, iteratedMedia.id);
			} else {
				iteratedMedia = array[i - 1]; 
				iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
				iteratedMediaComponent = $(iteratedMediaId);
				iteratedMediaComponent.style.border = MEDIA.image.selectedStyle;
				MEDIA.image.loadMediaById(imageId, array, normalArray, iteratedMedia.id);
			}
			
			MEDIA.image.scrollThumbnail(thumbnailContainerId, i * iteratedMedia.image_width + i)
			break;
		}
   }
}

MEDIA.image.scrollThumbnail = function (thumbnailContainerId, scrollLeft) {
	var thumbnailMediaContainer = $(thumbnailContainerId);
	var tableComponent = thumbnailMediaContainer.firstElementChild;
	thumbnailMediaContainer.scrollLeft = scrollLeft;
}

MEDIA.image.clickSelectedMedia = function (imageId, array, normalArray, prefixId, id) {
	
	for(i = 0; i < array.length; i++) {
		var iteratedMedia = array[i]; 
		var iteratedMediaId = MEDIA.image.prepareId(prefixId, iteratedMedia); 
		var iteratedMediaComponent = $(iteratedMediaId);
		
		if (id == iteratedMedia.id) {
			iteratedMediaComponent.style.border = MEDIA.image.selectedStyle;
		} else {
			iteratedMediaComponent.style.border = MEDIA.image.noSelectedStyle;
		}
	}	
	
	MEDIA.image.loadMediaById(imageId, array, normalArray, id);
}

/** 
* Media overlay functionalities.
* Overlay name space.
*/
MEDIA.overlay = {};

MEDIA.overlay.overlayScrollEvent = function () {
	var fadeComponent = $("fade");
	if (fadeComponent == null || fadeComponent.style.display == 'none' || fadeComponent.style.display == '') {
		return false;
	}

	MEDIA.overlay.showOverlay();
}

// assign overlayScrollEvent to onscroll evemt of window
window.onscroll = MEDIA.overlay.overlayScrollEvent;

MEDIA.overlay.getWindowHeight = function () {  
	var htmlHeight = document.body.parentNode.scrollHeight;
	var windowHeight = 0;  
	if (typeof(window.innerHeight ) == 'number' ) {
	    windowHeight = window.innerHeight;
	} else {
	    windowHeight = document.documentElement.clientHeight;
	}

	return Math.max(htmlHeight, windowHeight);
} 

MEDIA.overlay.getWindowWidth = function () {  
	var htmlWidth = document.body.parentNode.scrollWidth;
	var windowWidth = 0;  
	if (typeof(window.innerWidth ) == 'number' ) {
	    windowWidth = window.innerWidth;
	} else {
	    windowWidth = document.documentElement.clientWidth;
	}

	return Math.max(htmlWidth, windowWidth);
} 


MEDIA.overlay.showOverlay = function () {
	
	var top = document.body.scrollTop 
				? document.body.scrollTop
				    : (window.pageYOffset
				        ? window.pageYOffset
				        : (document.body.parentElement
				            ? document.body.parentElement.scrollTop
				            : 0
				        )
				    );

	var windowHeight = MEDIA.overlay.getWindowHeight();
	
	var fadeComponent = $("fade");
	fadeComponent.style.height = windowHeight + "px";
	var lightComponent = $("light");

	if (top > 0) {
		var lightTopPosition = 50 + top; //hardcode now
		lightComponent.style.top = lightTopPosition + "px"; 
	}
	
	var xPos = (MEDIA.overlay.getWindowWidth() / 2) - 325; //hardcode now
	lightComponent.style.left = xPos + "px";

	fadeComponent.style.display = "block";
	new Effect.Highlight(fadeComponent, { startcolor: '#000000', endcolor: '#1c0e3b' })
	lightComponent.style.display = "block";

	// if media is not selected (no exists) we should not render thumbnails media, etc 
	if (currentMediaBean == null) {
		return true;
	}

	//select thumbnail
	var mediaArrays = MEDIA.arrays;

	var thumbnailMedia = MEDIA.image.findMediaByAttrs(mediaArrays.thumbnailNoMissing, currentMediaBean);

	for(i = 0; i < mediaArrays.thumbnailNoMissing.length; i++) {
		var mediaNoMissing = mediaArrays.thumbnailNoMissing[i]; 
		var mediaNoMissingId = MEDIA.image.prepareId("thumbnailLargeNoMissing_", mediaNoMissing); 
		var thumbnailNoMissingMedia = $(mediaNoMissingId);

		if (thumbnailMedia.id == mediaNoMissing.id) {
			thumbnailNoMissingMedia.style.border = MEDIA.image.selectedStyle;
			
			//MEDIA.image.scrollThumbnail('lightThumbnailMediaContainer', i * currentMediaBean.image_width + i)
		} else {
			thumbnailNoMissingMedia.style.border = MEDIA.image.noSelectedStyle;
		}
	}	

	MEDIA.image.loadMediaById("largeImage", mediaArrays.thumbnailNoMissing, mediaArrays.largeNoMissing, thumbnailMedia.id);
}
	
MEDIA.overlay.hideOverlay = function () {
	var fadeComponent = $("fade");
	var lightComponent = $("light");

	new Effect.Fade(fadeComponent.id, { duration: 1.0 });
	new Effect.BlindUp(lightComponent.id, { duration: 1.0 });
	//new Effect.DropOut(lightComponent.id);
	//new Effect.Puff(lightComponent.id, { duration: 3 });
	//lightComponent.style.display='none';
	//fadeComponent.style.display='none';
}
	
/**
* Common scripts to use media lib
*/
function doNextMedia(thumbnailContainerId, imageId, array, normalArray, prefixId) {
	MEDIA.image.nextSelectedMedia(thumbnailContainerId, imageId, array, normalArray, prefixId);
	return false;
}

function doPrevMedia(thumbnailContainerId, imageId, array, normalArray, prefixId) {
	MEDIA.image.prevSelectedMedia(thumbnailContainerId, imageId, array, normalArray, prefixId);
	
	return false;
}

function doClickMedia(imageId, array, normalArray, prefixId, id) {
	MEDIA.image.clickSelectedMedia(imageId, array, normalArray, prefixId, id);
	return false;
}

function doChangeImage(imgId, imgName) {
	MEDIA.image.changeImage(imgId, imgName);
	return false;
}

function doOutChangeImage(img) {
	MEDIA.image.onOutChangeImage(img);
	return false;
}

function doOverChangeImage(img) {
	MEDIA.image.onOverChangeImage(img);
	return false;
}

function onMouseOverBigImage(img) 
{
	img.style.cursor = "pointer";
	//new Effect.Scale(img.id, 110, { scaleFromCenter: true });
	//new Effect.Pulsate(img.id, { pulses: 1, duration: 0.3 });
	//Effect.Grow(img.id);
}

function onMouseOutBigImage(img) 
{
	//new Effect.Scale(img.id, 90, { scaleFromCenter: true });
	//new Effect.Pulsate(img.id, { pulses: 1, duration: 0.3 });
}

function doShowOverlay()
{
	MEDIA.overlay.showOverlay();
	return false;
}

function doHideOverlay()
{
	MEDIA.overlay.hideOverlay();
	return false;
}