// #######################################################
//
//	Skrypt do tworzenia CSS i HTML na podstawie lini pomocniczych (guides)
//	Użycie: 
//	ustaw linie pomocnicze na grafice w miejscach odpowiedających cięciu grafiki na kawałki,
//	a następnie odpal ten skrypt poprzez menu File -> scripts -> browse...
//	Grafika musi być odpowiednio przygotowana:
//  Poszczególne pozycje menu powinny być odzielone liniami pomocniczymi.
//  Jeżeli menu ma orientację poziomą, wtedy na górze obok siebie powinny się znajdować pozycje "normal",
//  a pod nimi odzielone od powyższych pojedyńczą linią pomocniczą - pozycje "hover". 
//  Przykładowe ułożenie grafiki (znak "+" rysuje linie pomocnicza):
//
//////////////////////////////////////////////////////////////////////////////////
//                   +                  +                  +                    //
//  [ menu1 normal ] + [ menu2 normal ] + [ menu3 normal ] + [ menu4 normal ]   //
//                   +                  +                  +                    //
//  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++   //
//                   +                  +                  +                    //
//  [ menu1 hover  ] + [ menu2 hover  ] + [ menu3 hover  ] + [ menu4 hover  ]   //
//                   +                  +                  +                    //
//////////////////////////////////////////////////////////////////////////////////
//
//  Takie samo postępowanie jest w przypadku menu pionowego, zmienia się tylko orientacja :)
//	Więcej informacji na: http://doman.art.pl/2011-02-27
//
// #######################################################

if( BridgeTalk.appName == "photoshop" ) {
    var doc = app.activeDocument;
	var nazwaMenu = '';
	var guidesH = []; //tu bede przechowywal poziome linie pomocnicze
	var guidesV = []; //tutaj pionowe
	var plasterki = []; //tutaj będę przechowywał plasterki
	var g = activeDocument.guides; //pobieram guides
	var documentWidth = parseInt(doc.width); //width dokumentu
	var documentHeight = parseInt(doc.height); //height

	//dziele na tablice guides
	for (i=0; i<g.length; i++) {
		if ( String(g[i].direction).toUpperCase().indexOf('VERTICAL') >= 0) {
			guidesV.push({g : g[i], x : parseInt(g[i].coordinate)});
		} else {
			guidesH.push({g : g[i], y : parseInt(g[i].coordinate)});
		}
	}

	//menu może mieć stan normal i hover, które oddziela 1 linia.
	//Sytuacja ta może występować dla pionu lub poziomu, ale nie dla 2 jednocześnie
	if (guidesV.length>1 && guidesH.length>1) {
		alert("Za dużo linii. \nMoże być tylko 1 dzieląca obraz na 2 części (pionowo lub poziomo)");
	}
	
	
//##############################################################################
	//OKNO Z WYGENEROWANYM KODEM POZIOMYM
	function windowPoziom() {
		
		//pobrane guides trzeba posortować od lewej do prawej, bo są 
		//ułożone po dacie utworzenia
		function sortowaniePoziome(a,b) {
			return ((a.x < b.x) ? -1 : ((a.x > b.x) ? 1 : 0));
		}
		
		guidesV.sort(sortowaniePoziome)
		
		//jezeli jest pozioma to bedziemy liczyc tez hover
		if (guidesH.length) {
			var jestHover = true;
			var hPlasterka = guidesH[0].y;
		} else {
			var jestHover = false;
			var hPlasterka = documentHeight;
		}
		
		if (guidesV.length) {
			
			for (i=0; i<guidesV.length; i++) {
				if (i==0) {
					var gW = guidesV[i].x;
					plasterki[i] = {x:0, width:gW}
				} else {
					var gX = -(guidesV[i-1].x);
					var gW = guidesV[i].x - guidesV[i-1].x;
					plasterki[i] = {x:gX, width:gW}
				}
				
			}
			//ostatni plasterk - od ostatniej linii do konca dokumentu
			gX = guidesV[guidesV.length-1].x;
			plasterki[plasterki.length] = {x:-gX, width:documentWidth-gX}
			
		} else {
			//jezeli nie ma lini pomocniczych to wtedy 1 plasterek = caly dokument
			plasterki[0] = {x:0, width:documentWidth}
		}
		var win = new Window ('dialog', 'Wygenerowany kod:');	
			win.orientation = "column";
		
	//=============================
	//HTML menu
		var text = '';
			text += "<ul class=\""+nazwaMenu+"\">\n";
			for (i=0; i<plasterki.length; i++) {
				text += "<li class=\"link_"+(i+1)+"\"><a href=\"...\">....</a></li>\n";
			}
			text += "</ul>";
			
		var panel = win.add("panel");
			panel.orientation = "column";
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "HTML dla menu:");		
			panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});
                //editInput.panelgraphics.font = ScriptUI.newFont("Arial","REGULAR",9);
	//=============================
	//podstawowe CSS menu
		var text = '';
			text += "."+nazwaMenu+" {width:"+documentWidth+"px; height:"+hPlasterka+"px;}\n";
			text += "."+nazwaMenu+" li {background:url(...) no-repeat; height:"+hPlasterka+"px; float:left;}\n";
			text += "."+nazwaMenu+" a {width:100%; height:"+hPlasterka+"px; overflow:hidden; text-indent:-999px; display:block;}\n";

		var panel = win.add("panel");
			panel.orientation = "column";
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS dla menu:");		
			panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});
		var ie6info = panel.add("statictext", {x:0, y:5, width:600, height:10}, "Dla IE6 trzeba dodać jeszcze dla \".menu a\" padding-top:-"+hPlasterka+"px;");
            ie6info.graphics.font = ScriptUI.newFont("Arial","REGULAR",10); 

	//=============================	
	//wypisuje style - dla normal
		var panel = win.add("panel");
		var	text = '';
		for (i=0; i<plasterki.length; i++) {		
			var x = (plasterki[i].x==0) ? plasterki[i].x : plasterki[i].x + "px";	
			text += "."+nazwaMenu+" .link_"+(i+1)+ " ";
			text += "{background-position:"+x+" 0; width:"+plasterki[i].width+"px;}" + "\n";
		}
		panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS stan normal:");
		panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});

	//=============================		
	//wypisuje style - dla hover - jezeli jest
		if (jestHover) {
			var panel = win.add("panel");
			var	text = '';
			
			for (i=0; i<plasterki.length; i++) {		
				var x = (plasterki[i].x==0) ? plasterki[i].x : plasterki[i].x + "px";
				text += "."+nazwaMenu+" .link_"+(i+1)+ ":hover ";
				text += "{background-position:"+x+" "+(-(hPlasterka))+"px;}" + "\n";
			}
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS stan hover:");
			panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});	
			
			//dodatkowy help
			var helpBtn = panel.add('button', {x:0,y:0,width:200,height:20}, 'Czemu takie długie hover?');
				helpBtn.onClick = function() {
					var winHelp = new Window ('dialog', 'Czemu takie długie hover?');	
					var panelH = winHelp.add("panel");
					var text = "Niestety przeglądarka FF do wersji 3.6 nie obsługuje\n background-position-y, dlatego"
						text += "nie jesteśmy w stanie obsłużyć hover jedną linijką kodu. Prawdopodobnie";
						text += "w wersji 4 kłopot będzie rozwiązany, więc trzeba czekać aż wersja 4 wyprze 3, ablo zastosować do tego celu js (patrz Google)";
					panelH.add("statictext", {x:0, y:5, width:400, height:100}, text, {multiline:true});
					panelH.add("button", undefined, 'Ok', { name:'ok' });
					winHelp.center();
					winHelp.show();
				}
		
		}	
			
		win.okBtn = win.add("button", undefined, 'Ok', { name:'ok' });
		
		
		win.center();
		win.show();
	}

//##############################################################################	
	//OKNO Z WYGENEROWANYM KODEM PIONOWYM
	function windowPion() {
	
		//pobrane guides trzeba posortować od goy do dolu, bo są 
		//ułożone po dacie utworzenia
		function sortowaniePion(a,b) {
			return ((a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0));
		}
		
		guidesH.sort(sortowaniePion)
		
		//jezeli jest pozioma to bedziemy liczyc tez hover
		if (guidesV.length) {
			var jestHover = true;
			var wPlasterka = guidesV[0].x;
		} else {
			var jestHover = false;
			var wPlasterka = documentWidth;
		}
		
		if (guidesH.length) {
			
			for (i=0; i<guidesH.length; i++) {
				if (i==0) {
					var gH = guidesH[i].y;
					plasterki[i] = {y:0, height:gH}
				} else {
					var gY = -(guidesH[i-1].y);
					var gH = guidesH[i].y - guidesH[i-1].y;
					plasterki[i] = {y:gY, height:gH}
				}
				
			}
			//ostatni plasterk - od ostatniej linii do konca dokumentu
			gY = guidesH[guidesH.length-1].y;
			plasterki[plasterki.length] = {y:-gY, height:documentHeight-gY}
			
		} else {
			//jezeli nie ma lini pomocniczych to wtedy 1 plasterek = caly dokument
			plasterki[0] = {y:0, height:documentHeight}
		}
		
		var win = new Window ('dialog', 'Wygenerowany kod:');	
			win.orientation = "column";

	//=============================
	//HTML menu
		var text = '';
			text += "<ul class=\""+nazwaMenu+"\">\n";
			for (i=0; i<plasterki.length; i++) {
				text += "<li class=\"link_"+(i+1)+"\"><a href=\"...\">....</a></li>\n";
			}
			text += "</ul>";
			
		var panel = win.add("panel");
			panel.orientation = "column";
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "HTML dla menu:");		
			panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});

			
	//=============================
	//podstawowe CSS dla menu
		var text = '';
			text += "."+nazwaMenu+" {width:"+wPlasterka+"px; height:"+documentHeight+"px;}\n";
			text += "."+nazwaMenu+" li {background:url(...) no-repeat; width:"+wPlasterka+"px;}\n";
			text += "."+nazwaMenu+" a {width:100%; height:100%; overflow:hidden; text-indent:-999px; display:block;}\n";

		var panel = win.add("panel");
			panel.orientation = "column";
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS dla menu:");		
			panel.add("edittext", {x:0, y:5, width:600, height:70}, text, {multiline:true});
		var ie6info = panel.add("statictext", {x:0, y:5, width:600, height:10}, "Dla IE6 dodać jeszcze dla \".menu a\" padding-top:-"+wPlasterka+"px;");
            ie6info.graphics.font = ScriptUI.newFont("Arial","REGULAR",10); 
	//=============================		
	//wypisuje style - dla normal
		var panel = win.add("panel");
		var text = '';
		for (i=0; i<plasterki.length; i++) {		
			var y = (plasterki[i].y==0) ? plasterki[i].y : plasterki[i].y + "px";	
			text += "."+nazwaMenu+" .link_"+(i+1)+ " ";
			text += "{background-position:0 "+y+"; height:"+plasterki[i].height+"px;}" + "\n";
		}
		panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS stan normal:");
		panel.add("edittext", {x:0, y:5, width:600, height:100}, text, {multiline:true});

	//=============================		
	//wypisuje style - dla hover - jezeli jest
		if (jestHover) {
			var panel = win.add("panel");
			var text = '';
			
			for (i=0; i<plasterki.length; i++) {		
				var y = (plasterki[i].y==0) ? plasterki[i].y : plasterki[i].y + "px";
				text += "."+nazwaMenu+" .link_"+(i+1)+ ":hover ";
				text += "{background-position:"+(-(wPlasterka))+"px "+y+";}" + "\n";
			}
			panel.add("statictext", {x:0, y:5, width:600, height:10}, "CSS stan hover:");
			panel.add("edittext", {x:0, y:5, width:600, height:100}, text, {multiline:true});	
			
			//dodatkowy help
			var helpBtn = panel.add('button', {x:0,y:0,width:200,height:20}, 'Czemu takie długie hover?');
				helpBtn.onClick = function() {
					var winHelp = new Window ('dialog', 'Czemu takie długie hover?');	
					var panelH = winHelp.add("panel");
					var text = "Niestety przeglądarka FF do wersji 3.6 nie obsługuje\n background-position-y\n, dlatego"
						text += "nie jesteśmy w stanie obsłużyć hover jedną linijką kodu. Prawdopodobnie";
						text += "w wersji 4 kłopot będzie rozwiązany, więc trzeba czekać aż wersja 4 wyprze 3, ablo zastosować do tego celu js (patrz Google)";
					panelH.add("statictext", {x:0, y:5, width:400, height:100}, text, {multiline:true});
					panelH.add("button", undefined, 'Ok', { name:'ok' });
					winHelp.center();
					winHelp.show();
				}
		
		}	
		win.okBtn = win.add("button", undefined, 'Ok', { name:'ok' });
		
		
		win.center();
		win.show();
	}
	
//##############################################################################
	//OKNO Z NAZWA MENU
	function windowName() {
		var win = new Window('dialog', 'Podaj nazwę menu:');	
			win.orientation = "column";
		var nameBtn = win.add("edittext", {x:0, y:5, width:200, height:20}, '', {multiline:true});
            
		var btn = win.add('button', {x:0,y:0,width:100,height:20}, 'Ok');	
			btn.onClick = function() {
				var reg = new RegExp("[^. ()]")
                 var nazwaM = nameBtn.text;
				if (/^[a-z][a-z0-9\-_]{2,}$/i.test(nazwaM)) {
					nazwaMenu = nameBtn.text;
					win.close();
					if (guidesV.length > guidesH.length) {
						windowPoziom();
					} else {
						windowPion();
					}
				} else if (/^[^a-z]/i.test(nazwaM)) {
                    alert("Nazwa nie może zaczynać się od liczby");
                 } else if (/[^a-z0-9\-]/i.test(nazwaM)) {
                    alert("Nazwa zawiera niedozwolone znaki");
                 } else {
                    alert("Nazwa musi mieć co najmniej 2 znaki");
                 }
			}
		win.center();
		win.show();
	}
	
	windowName();
}