Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth;
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,t) {
	   	element = $(element);
    	element.style.left = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src;
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href;
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll)
	return arrayPageScroll;
}

function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) {
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;
}

function initVizuals() {
    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id','vizuals_layout');
    objOverlay.style.display = 'none';
    objOverlay.onclick = function() { myVizuals_finish(); return false; }
    objBody.appendChild(objOverlay);

    var objLoadingContainer = document.createElement("div");
    objLoadingContainer.setAttribute('id','vizuals_loading');
    objLoadingContainer.style.display = 'none';
    objBody.appendChild(objLoadingContainer);

    var objVizualsLoading = document.createElement("img");
    objVizualsLoading.setAttribute('src','/@img/ajax-loading.gif');
    objVizualsLoading.onclick = function() { myVizuals_finish(); return false; }
    objLoadingContainer.appendChild(objVizualsLoading);

    var objContentContainer = document.createElement("div");
    objContentContainer.setAttribute('id','vizuals_container');
    objContentContainer.style.display = 'none';
    objBody.appendChild(objContentContainer);

    var objAjaxTable = document.createElement("table");
    objAjaxTable.style.backgroundColor = "#ffffff";
    objAjaxTable.setAttribute('border','0');
    objAjaxTable.setAttribute('cellPadding','0px');
    objAjaxTable.setAttribute('cellSpacing','0px');
    objContentContainer.appendChild(objAjaxTable);

    var objAjaxTableBody = document.createElement("tbody");
    objAjaxTable.appendChild(objAjaxTableBody);

    var objAjaxTableTROne = document.createElement("tr");
    objAjaxTableBody.appendChild(objAjaxTableTROne);

    var objAjaxTableTRTwo = document.createElement("tr");
    objAjaxTableBody.appendChild(objAjaxTableTRTwo);

    var objAjaxTableCellOne = document.createElement("td");
    objAjaxTableCellOne.setAttribute('rowSpan','2');
    objAjaxTableCellOne.setAttribute('align','left');
    objAjaxTableCellOne.setAttribute('height','492');
    objAjaxTableTROne.appendChild(objAjaxTableCellOne);

    var objGirlContent = document.createElement("div");
    objGirlContent.setAttribute('id','girl_object');
    objAjaxTableCellOne.appendChild(objGirlContent);

    var objImgGirl = document.createElement("img");
    objImgGirl.setAttribute('id','girl_object_img');
    objGirlContent.appendChild(objImgGirl);

    var objAjaxTableCellTwo = document.createElement("td");
    objAjaxTableCellTwo.setAttribute('width','220');
    objAjaxTableCellTwo.setAttribute('height','415');
    objAjaxTableCellTwo.setAttribute('id', 'ajax-tablefix');
    objAjaxTableTROne.appendChild(objAjaxTableCellTwo);

    var objClose = document.createElement("div");
    objClose.setAttribute('id','ajax_close');
    objClose.setAttribute('align','right');
    objAjaxTableCellTwo.appendChild(objClose);

    var objCloseHref = document.createElement("a");
    objCloseHref.setAttribute('href','#');
    objCloseHref.setAttribute('onclick','return false;');
    objClose.appendChild(objCloseHref);

    var objImgClose = document.createElement("img");
    objImgClose.setAttribute('src','/@img/ajax-close.png');
    objImgClose.setAttribute('border','0');
    objImgClose.onclick = function() { myVizuals_finish(); return false; }
    objCloseHref.appendChild(objImgClose);

    var objContentBlack = document.createElement("div");
    objContentBlack.setAttribute('id','ajax_content_black');
    objAjaxTableCellTwo.appendChild(objContentBlack);

    var objContentBlackData = document.createElement("div");
    objContentBlackData.setAttribute('id','ajax_content_black_data');
    objContentBlack.appendChild(objContentBlackData);

    var objContentData = document.createElement("div");
    objContentData.setAttribute('id','ajax_content_simpledata');
    objAjaxTableCellTwo.appendChild(objContentData);

    var objAjaxTableCellThree = document.createElement("td");
    objAjaxTableCellThree.setAttribute('width','220');
    objAjaxTableCellThree.setAttribute('height','77');
    objAjaxTableCellThree.setAttribute('style', 'vertical-align: top');
    objAjaxTableTRTwo.appendChild(objAjaxTableCellThree);

    var objImgLogo = document.createElement("img");
    objImgLogo.setAttribute('src','/@img/ajax-logo.png');
    objAjaxTableCellThree.appendChild(objImgLogo);
}

// Script
function myVizuals_begin(img) {
    var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	var AjaxWidth = 540;

    Element.setHeight('vizuals_layout', arrayPageSize[1]);

    Element.setTop('vizuals_loading', arrayPageScroll[1] + (arrayPageSize[3] / 2.2));
    Element.setLeft('vizuals_loading', (arrayPageSize[0] - 35) / 2);

    switch(img) {
        case 1:
            Element.setInnerHTML('ajax_content_black_data', 'PARÁZSLÓ VÖRÖS<br>MERÉSZ ELEGANCIA<br>IZZÓ TŰZFÉNY');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 6.46 (sötétszőke rézvörös árnyalattal)<br><br><b>További rezes árnyalatok:</b> 7.43, 6.45, 5.4, 5.45, 4.45<br><br><b>Frizura:</b> Dudás Attila<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 2:
            Element.setInnerHTML('ajax_content_black_data', 'FEMME FATALE<br>EGZOTIKUS MAHAGÓNI<br>VÖRÖS DÉMON');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 5.5 (világosbarna mahagóni árnyalattal)<br><br><b>További vörös-mahagóni árnyalatok:</b> 5.56, 5.62, 4.56, 4.65<br><br><b>Frizura:</b> Kucsera Zsolt<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 3:
            Element.setInnerHTML('ajax_content_black_data', 'ROZSDABARNA CSILLANÁS<br>MELEG FÉNYŰ RÉZ<br>ŐSZI SZÍNEK VARÁZSA');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 5.4 (világosbarna réz árnyalattal)<br><br><b>További rezes árnyalatok:</b> 7.43, 6.45, 6.46, 5.45, 4.45<br><br><b>Frizura:</b> Binder Géza<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 4:
            Element.setInnerHTML('ajax_content_black_data', 'MELEG, TELT ÁRNYALAT<br>SUGÁRZÓ KEDVESSÉG<br>ROZSDABARNA FÉNY');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 6.45 + 4.45 melír (sötétszőke réz-mahagóni árnyalattal, barna réz-mahagóni melírral)<br><br><b>További rezes árnyalatok:</b> 7.43, 6.46, 5.4, 5.45<br><br><b>Frizura:</b> Szabados Iréne<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 5:
            Element.setInnerHTML('ajax_content_black_data', 'ÉDES MÉZ<br>RAGYOGÓ NAPFÉNY<br>ARANNYAL ÖTVÖZÖTT RÉZ');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 8.34 (világos szőke, arany réz árnyalattal)<br><br><b>További világos arany és arany réz árnyalatok:</b> 9.3, 8.3, 7.3, 7.34<br><br><b>Frizura:</b> Zsiga Renáta<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 6:
            Element.setInnerHTML('ajax_content_black_data', 'NARANCSOS CSOKOLÁDÉ<br>RAFINÁLT BARNA<br>ÓARANY RAGYOGÁS');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 6.34 (sötétszőke, arany réz árnyalattal)<br><br><b>További sötétszőke és világosbarna meleg árnyalatok:</b> 7.35, 6.3, 5.35<br><br><b>Frizura:</b> Kucsera Zsolt<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 7:
            Element.setInnerHTML('ajax_content_black_data', 'NEMES MAHAGÓNI<br>TELT, MÉLY BARNA<br>FORRÓ CSOKOLÁDÉ');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 4.35 (barna, arany mahagóni árnyalattal)<br><br><b>További meleg, barna árnyalatok:</b> 6.32, 5.32<br><br><b>Frizura:</b> Zsidró Tamás<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
            AjaxWidth = 915;
        break;
        case 8:
            Element.setInnerHTML('ajax_content_black_data', 'NARANCSOS CSOKOLÁDÉ<br>KÁVÉ ÉS FAHÉJ<br>ELBŰVÖLŐ BARNA');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 6.3 + 5.4 melír (sötétszőke arany árnyalattal, világosbarna réz melírral)<br><br><b>További arany barna árnyalatok:</b> 5.3, 4.3<br><br><b>Frizura:</b> Hajas László<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
            AjaxWidth = 915;
        break;
        case 9:
            Element.setInnerHTML('ajax_content_black_data', 'KARIZMATIKUS SZŐKE<br>JEGES MERÉSZSÉG<br>EXTRAVAGÁNS PLATINA');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 10 (legvilágosabb természetes szőke)<br><br><b>További természetes és bézs szőke árnyalatok:</b> 9, 9.13, 9.31<br><br><b>Frizura:</b> Hajas László<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 10:
            Element.setInnerHTML('ajax_content_black_data', 'HŰVÖS ELEGANCIA<br>FINOM BÉZSBARNA<br>HAMVAS ARANY FÉNY');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 8.13 (világos szőke hamvas arany árnyalattal)<br><br><b>További hideg bézs árnyalatok:</b> 9.13, 7.13, 7.23<br><br><b>Frizura:</b> Dudás Attila<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
            AjaxWidth = 915;
        break;
        case 11:
            Element.setInnerHTML('ajax_content_black_data', 'KIFINOMULT TERMÉSZETESSÉG<br>BÉZS TÜNDÖKLÉS<br>HŰVÖS CSILLANÁS');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 7.23 (szőke violette arany árnyalattal)<br><br><b>További hideg bézs árnyalatok:</b> 9.13, 8.13, 7.13, 6.23<br><br><b>Frizura:</b> Binder Géza<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
            AjaxWidth = 915;
        break;
        case 12:
            Element.setInnerHTML('ajax_content_black_data', 'HŰVÖS BARNA CSÁBÍTÁS<br>VALÓDI ÉTCSOKOLÁDÉ<br>HAMVAS VIOLETT FÉNY');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 5.12 (világosbarna hamvas violette árnyalattal)<br><br><b>További hideg barna árnyalatok:</b> 6.1, 5.25, 4.15<br><br><b>Frizura:</b> Dudás Attila<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 13:
            Element.setInnerHTML('ajax_content_black_data', 'ULTRANŐIES STÍLUS<br>HAMVAS BARACKKAL CSÍKOZOTT SZŐKE<br>EXTRÉM ELEGANCIA');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 9 + 9.2 (nagyon világos szőke, violette melírral)<br><br><b>További természetes és hideg szőke árnyalatok:</b> 10, 10.1, 9.1<br><br><b>Frizura:</b> Zsiga Renáta<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 14:
            Element.setInnerHTML('ajax_content_black_data', 'SARKI FÉNY<br>SZŐKE CSILLAG<br>KELTA LEGENDA');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 9.2 (nagyon világos szőke violette árnyalattal)<br><br><b>További hideg szőke árnyalatok:</b> 10.1, 9.1, 8.1<br><br><b>Frizura:</b> Zsidró Tamás<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
        break;
        case 15:
            Element.setInnerHTML('ajax_content_black_data', 'LILA FÉNYŰ VÖRÖS<br>ELLENÁLLHATATLAN VADSZILVA<br>VIOLETT VARÁZS');
            Element.setInnerHTML('ajax_content_simpledata', '<b>Hajszín:</b> INOA 4.26 (barna violette vörös árnyalattal)<br><br><b>További sötét violette árnyalatok:</b> 4.20<br><br><b>Frizura:</b> Szabados Iréne<br><b>Smink:</b> Dudás Tímea<br><b>Fotó:</b> David Arráez');
            AjaxWidth = 915;
        break;
    }

    imgPreloader = new Image();

	new Effect.Appear('vizuals_layout', { duration: 0.1, from: 0.0, to: 0.8,
	    afterFinish: function() {
            Element.show('vizuals_loading');

            imgPreloader.onload = function() {
                Element.hide('vizuals_loading');
                Element.setSrc('girl_object_img', imgPreloader.src);

                Element.setTop('vizuals_container', arrayPageScroll[1] + ((arrayPageSize[3] - 492) / 2));
                Element.setLeft('vizuals_container', (arrayPageSize[0] - AjaxWidth) / 2);

                new Effect.Appear('vizuals_container', { duration: 0.5, from: 0.0, to: 1.0 });
            }

            imgPreloader.src = '/@img/shade/' + img + '.png';
	   }
	});

}

function myVizuals_finish() {
    Element.hide('vizuals_loading');
    new Effect.Fade('vizuals_container', {duration: 0.5,
        afterFinish: function() {
            new Effect.Fade('vizuals_layout', { duration: 0.1});
        }
    });
}

function initPopUp() {
    var objBodyPopUp = document.getElementsByTagName("body").item(0);

    var objOverlayPopUp = document.createElement("div");
    objOverlayPopUp.setAttribute('id','popup_layout');
    objOverlayPopUp.style.display = 'none';
    objOverlayPopUp.onclick = function() { myPopUp_finish(); return false; }
    objBodyPopUp.appendChild(objOverlayPopUp);

    var objLoadingContainerPopUp = document.createElement("div");
    objLoadingContainerPopUp.setAttribute('id','popup_loading');
    objLoadingContainerPopUp.style.display = 'none';
    objBodyPopUp.appendChild(objLoadingContainerPopUp);

    var objVizualsLoadingPopUp = document.createElement("img");
    objVizualsLoadingPopUp.setAttribute('src','/@img/ajax-loading.gif');
    objVizualsLoadingPopUp.onclick = function() { myPopUp_finish(); return false; }
    objLoadingContainerPopUp.appendChild(objVizualsLoadingPopUp);

    var objContentContainerPopUp = document.createElement("div");
    objContentContainerPopUp.setAttribute('id','popup_container');
    objContentContainerPopUp.style.display = 'none';
    objBodyPopUp.appendChild(objContentContainerPopUp);

    var objAjaxTablePopUp = document.createElement("table");
    objAjaxTablePopUp.style.backgroundColor = "#ffffff";
    objAjaxTablePopUp.setAttribute('border','0');
    objAjaxTablePopUp.setAttribute('cellPadding','0px');
    objAjaxTablePopUp.setAttribute('cellSpacing','0px');
    objContentContainerPopUp.appendChild(objAjaxTablePopUp);

    var objAjaxTableBodyPopUp = document.createElement("tbody");
    objAjaxTablePopUp.appendChild(objAjaxTableBodyPopUp);

    var objAjaxTableTRPopUp = document.createElement("tr");
    objAjaxTableBodyPopUp.appendChild(objAjaxTableTRPopUp);

    var objAjaxTableCellPopUp = document.createElement("td");
    objAjaxTableCellPopUp.setAttribute('id', 'ajax-popup-tablefix');
    objAjaxTableCellPopUp.setAttribute('width','921');
    objAjaxTableCellPopUp.setAttribute('height','580');
    objAjaxTableTRPopUp.appendChild(objAjaxTableCellPopUp);

    var objPopUpContent = document.createElement("div");
    objPopUpContent.setAttribute('id','popup_object');
    objAjaxTableCellPopUp.appendChild(objPopUpContent);

    var objImgPopUp = document.createElement("img");
    objImgPopUp.setAttribute('id','popup_object_img');
    objImgPopUp.setAttribute('usemap','#PopupImages',0);
    objPopUpContent.appendChild(objImgPopUp);

    myPopUp_begin();
}

function myPopUp_begin() {
    var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

    Element.setHeight('popup_layout', arrayPageSize[1]);

    Element.setTop('popup_loading', arrayPageScroll[1] + (arrayPageSize[3] / 2.2));
    Element.setLeft('popup_loading', (arrayPageSize[0] - 35) / 2);

    imgPreloader = new Image();

	new Effect.Appear('popup_layout', { duration: 0.1, from: 0.0, to: 0.8,
	    afterFinish: function() {
            Element.show('popup_loading');

            imgPreloader.onload = function() {
                Element.hide('popup_loading');
                Element.setSrc('popup_object_img', imgPreloader.src);

                Element.setTop('popup_container', arrayPageScroll[1] + ((arrayPageSize[3] - 580) / 2));
                Element.setLeft('popup_container', (arrayPageSize[0] - 921) / 2);

                new Effect.Appear('popup_container', { duration: 0.5, from: 0.0, to: 1.0 });
            }

            imgPreloader.src = '/@img/INOA-day.jpg';
	   }
	});
}

function myPopUp_finish() {
    Element.hide('popup_loading');
    new Effect.Fade('popup_container', {duration: 0.5,
        afterFinish: function() {
            new Effect.Fade('popup_layout', { duration: 0.1});
        }
    });
}