Accessories = {
	'idDivForAll':'id_table_article_all', 
	'idDivForTable':'id_table_article',
	'idDivArticleName':'id_articleName',
	'sortColumnNo':1,
	'sortOrder':'asc'
	};

$(document).ready(function() {	 
	$('.shipping-details-under-construction').click(function(){
		 alert('Versandinformationen in Arbeit.');
	});
});

Accessories.init = function() {
	//alert('Accessories.init()'); 
	$('#' + Accessories.idDivForAll).hide(); 
}

Accessories.reload = function() 
{
	Accessories.showByArticleId(Accessories.articleId);
}

Accessories.showByArticleId = function(articleId) {
	Accessories.articleId = articleId;
	//alert('Accessories.showByArticleId ' + articleId);
	var url = "articles/group/getaccessories/article_id/" + articleId + '/localeId/' + Locales.localeId + '/strLocale/' + Locales.strLocale +
	'/sortColumnNo/' + Accessories.sortColumnNo + '/sortOrder/' + Accessories.sortOrder;  //alert(url);
	//$.get(url ,  function(json) {  alert(json);
    $.getJSON(url ,  function(json) { 			
            Accessories._buildTable(json);
        }, 'json');
}

Accessories.__setTableTitle = function(json)
{
	//	$('#' + Accessories.idDivArticleName).html(json.articleName);
    $('#' + Accessories.idDivArticleName).attr('src','media/button/index.php?c=- ' + json.articleName + '&mode=hover&type=6');
	//alert($('#' + Accessories.idDivArticleName).attr('src'));
}

Accessories._buildTable = function(json)
{	
	var table    = $(document.createElement('table')).attr({
		'cellspacing':"0",
		'cellpadding':"3", 
		'border': "0", 
		'class':"datas"
	});
	var colgroup = Accessories._getTableColgroup();
	var thead    = Accessories._getTableHead(json.headers);
	var tbody    = Accessories._getTableBody(json.records);
	table.append(colgroup);
	table.append(thead);
	table.append(tbody);
	$('#' + Accessories.idDivForTable ).empty().append(table);
	//Accessories.___initTableHeadSorting_withTwoArrows();
	Accessories.___initTableHeadSorting_likeFileExplorer();
	Accessories.__setTableTitle(json);
}

Accessories._getTableColgroup = function() 
{
	var colgroup = $(document.createElement('colgroup'));

	colgroup.append($(document.createElement('col')).css('width','140px'));
	colgroup.append($(document.createElement('col')).css('width','140px'));
	colgroup.append($(document.createElement('col')));
	colgroup.append($(document.createElement('col')).css('width','140px'));
	colgroup.append($(document.createElement('col')).css('width','140px'));
	
	return colgroup;	
}

Accessories._getTableHead = function(headers) 
{
	var thead = $(document.createElement('thead'));
	var tr = $(document.createElement('tr'));
	
	var th = $(document.createElement('th')).attr({'class':'first'});	
	th.append(Accessories.__getAhrefSorting(1, headers.article_number_internal));
	//th.append(Accessories.__getTableHeadSorting(1));
	th.append(Accessories.__getTableHeadSorting_likeFileExplorer(1));
	tr.append(th);
	
	var th = $(document.createElement('th')).attr({});
	th.append(Accessories.__getAhrefSorting(2, headers.manufactor_name));
	//th.append(Accessories.__getTableHeadSorting(2));
	th.append(Accessories.__getTableHeadSorting_likeFileExplorer(2));
	tr.append(th);
		
	var th = $(document.createElement('th')).attr({});
	th.append(Accessories.__getAhrefSorting(3, headers.translation_name));
	//th.append(Accessories.__getTableHeadSorting(3));
	th.append(Accessories.__getTableHeadSorting_likeFileExplorer(3));
	tr.append(th);
	
	var th = $(document.createElement('th')).css({'text-align':'right'});
	th.append(Accessories.__getAhrefSorting(4, headers.article_price));	 
	//th.append(Accessories.__getTableHeadSorting(4));
	th.append(Accessories.__getTableHeadSorting_likeFileExplorer(4));
	tr.append(th);
	
	var th = $(document.createElement('th')).attr({'class':'last'}).css({'text-align':'right'});
	th.append(Accessories.__getAhrefSorting(5, headers.article_delivery_time));	
	//th.append(Accessories.__getTableHeadSorting(5));
	th.append(Accessories.__getTableHeadSorting_likeFileExplorer(5));
	tr.append(th);	
	thead.append(tr);
	return thead;	
}

Accessories.__getAhrefSorting = function(columnNo, caption)
{
	var a = $(document.createElement('a')).attr({'class':'sort_asc','rel':columnNo});
	a.append(caption);
	return a;
}

Accessories.__getTableHeadSorting_withTwoArrows = function(columnNo) 
{
	var span = $(document.createElement('span'));
	
	var fileName = 'sort_asc.png';
	if ( (columnNo == Accessories.sortColumnNo) && ( 'asc' == Accessories.sortOrder )) {
		fileName = 'sort_asc_active.png';
	}
	
	var img = ' <img src="media/images/arrows/' + fileName + '" alt=" " class="arrow_sort_asc" rel="' + columnNo + '"/>';
	
	span.append(img);
	
	var fileName = 'sort_desc.png';
	if ( (columnNo == Accessories.sortColumnNo) && ( 'desc' == Accessories.sortOrder )) {
		fileName = 'sort_desc_active.png';
	}
	
	var img = '<img src="media/images/arrows/' + fileName + '" alt=" " class="arrow_sort_desc" rel="' + columnNo + '"/>';
	
	span.append(img);
	return span;
}

Accessories.__getTableHeadSorting_likeFileExplorer = function(columnNo) 
{ 
	var span = $(document.createElement('span'));
	
	var fileName  = '';
	var classSort = '';
	if ( (columnNo == Accessories.sortColumnNo) && ( 'asc' == Accessories.sortOrder )) {
		fileName  = 'sort_asc.png';
		classSort = 'arrow_sort_asc';		
	}
		
	if ( (columnNo == Accessories.sortColumnNo) && ( 'desc' == Accessories.sortOrder )) {
		fileName  = 'sort_desc.png';
		classSort = 'arrow_sort_desc';		
	}
	
	if (fileName > '') {
		var img = ' <img src="media/images/arrows/' + fileName + '" alt=" " class="' + classSort + '" rel="' + columnNo + '"/>';
		
		span.append(img);
	}
	
	return span;
}

Accessories.___initTableHeadSorting_withTwoArrows = function()
{
	$('#' + this.idDivForTable + ' th a.sort_asc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' th a.sort_asc').click(function() {
		Accessories.sortColumnNo = $(this).attr('rel');
		Accessories.sortOrder = 'asc';
		Accessories.reload();
	});	
	
	$('#' + this.idDivForTable + ' img.arrow_sort_asc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' img.arrow_sort_desc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' img.arrow_sort_asc').click(function() {
		Accessories.sortColumnNo = $(this).attr('rel');
		Accessories.sortOrder = 'asc';
		Accessories.reload();
	});
	$('#' + this.idDivForTable + ' img.arrow_sort_desc').click(function() {
		Accessories.sortColumnNo = $(this).attr('rel');
		Accessories.sortOrder = 'desc';
		Accessories.reload();
	});
}

Accessories.___initTableHeadSorting_likeFileExplorer = function()
{
	$('#' + this.idDivForTable + ' th a.sort_asc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' th a.sort_asc').click(function() { //alert('a.sort_asc');
	    var clickedColumnNo = $(this).attr('rel');
		if ( Accessories.sortColumnNo == clickedColumnNo ) {
			Accessories.sortOrder = (Accessories.sortOrder == 'asc')?'desc':'asc';
		} else {
			Accessories.sortOrder = 'asc';
		};
		Accessories.sortColumnNo = clickedColumnNo;
		Accessories.reload();
	});	
	
	$('#' + this.idDivForTable + ' img.arrow_sort_asc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' img.arrow_sort_desc').css({'cursor':'pointer'});
	$('#' + this.idDivForTable + ' img.arrow_sort_asc').click(function() { //alert('img.arrow_sort_asc');
		Accessories.sortColumnNo = $(this).attr('rel');
		Accessories.sortOrder = 'desc';
		Accessories.reload();
	});
	$('#' + this.idDivForTable + ' img.arrow_sort_desc').click(function() { // alert('img.arrow_sort_desc');
		Accessories.sortColumnNo = $(this).attr('rel');
		Accessories.sortOrder = 'asc';
		Accessories.reload();
	});
}

Accessories._getTableBody = function(json)
{
	var tbody = $(document.createElement('tbody'));
	var rowN = 0;
	
	
	$(json).each(function(i, item) {
		rowN = (rowN == 1)?2:1;
		var tr = $(document.createElement('tr')).attr({'class':'row_' + rowN});
		var td = $(document.createElement('td')); 	
		
		tr.tooltip({'bodyHandler':function() { //alert('secteo');
			return $('<img/>').attr({'src':'articles/group/detailspicture/article_id/' + item.article_id});
		}});		
		
		td.append(item.article_number_internal);
		tr.append(td);
		var td = $(document.createElement('td')); 
		td.append(item.manufactor_name);
		tr.append(td);
		var td = $(document.createElement('td')); 
		td.append(item.translation_name);
		tr.append(td);
		var td = $(document.createElement('td')).css({'text-align':'right','padding-right':'4px'}); 
		td.append(item.article_price);
		tr.append(td);
		var td = $(document.createElement('td')).css({'text-align':'right','padding-right':'4px', 'vertical-align':'top', 'padding-top':'2px'}); 
		td.append(item.article_delivery_time_img);
		tr.append(td);
		tbody.append(tr);
	});

	if ( json.length > 0 ) {  
		$('#' + Accessories.idDivForAll).show(); 
	} else {  
		$('#' + Accessories.idDivForAll).hide(); 		
	} 

	
	return tbody;
}




/*
 	
	<thead>
	 <tr>
		<th class="first">Artikel Nr. <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24"><img src="media/images/list_up_a.gif" alt="aufw&auml;rts sortieren" /></a> <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/0/1"><img src="media/images/list_down.gif" alt="aufw&auml;rts sortieren" /></a> </th>
	<th >Hersteller <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/1"><img src="media/images/list_up.gif" alt="aufw&auml;rts sortieren" /></a> <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/1/1"><img src="media/images/list_down.gif" alt="aufw&auml;rts sortieren" /></a> </th>

	<th >Produktname <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/2"><img src="media/images/list_up.gif" alt="aufw&auml;rts sortieren" /></a> <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/2/1"><img src="media/images/list_down.gif" alt="aufw&auml;rts sortieren" /></a> </th>
	<th  style="text-align: right;">Preis <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/3"><img src="media/images/list_up.gif" alt="aufw&auml;rts sortieren" /></a> <a href="/workspaces/krug/secteo_zcs/de/articlesbygroup/24/1/3/1"><img src="media/images/list_down.gif" alt="aufw&auml;rts sortieren" /></a> </th>
	<th class="last" style="text-align: right;">Verfügbarkeit  </th>
     </tr>
    </thead>

    <tbody>
 <!-- dont put br into the following line! //-->
  <tr class="row_selectable_2" ><td><input type="hidden" value="1" />08000001</td>
    <td>seiko</td>
    <td>5654&nbsp;</td>
    <td class="number">231,11 €&nbsp;</td>
    <td class="number">1&nbsp;</td>

   </tr>
 <!-- dont put br into the following line! //-->
  <tr class="row_selectable_1" ><td><input type="hidden" value="3" />08000003</td>
    <td>Sony</td>
    <td>Name tab&nbsp;</td>
    <td class="number">4,56 €&nbsp;</td>
    <td class="number">3&nbsp;</td>

   </tr>
 <!-- dont put br into the following line! //-->
  <tr class="row_selectable_2" ><td><input type="hidden" value="4" />08000004</td>
    <td>Sony</td>
    <td>New artikel deutsch&nbsp;</td>
    <td class="number">3,11 €&nbsp;</td>
    <td class="number">3&nbsp;</td>

   </tr>
</tbody>
</table>
 */