<?xml version="1.0" encoding="utf-8" ?>
<jsml xmlns="http://cutesoft.net/jsml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">


	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="1" padding="0,2,0,5"  height="90" width="32" >

		<jsml-ref name="rteborderstyle"/>

		<initialize>
			self.toggle_css_class("ribbon_{skin}");
			self.toggle_css_class("ribbon_{color}");
			self.toggle_css_class("ribbon_{skin}_{color}");
		</initialize>

	</panel>

	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
		<initialize>
			self.toggle_css_class("rbimage_{skin}");
			self.toggle_css_class("rbimage_{color}");
			self.toggle_css_class("rbimage_{skin}_{color}");
		</initialize>
		<attach name="tooglecssclass" arguments="jevent,name,mode">
			self.toggle_css_class("rbimage_{skin}_"+name,mode);
			self.toggle_css_class("rbimage_{color}_"+name,mode);
			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
		</attach>
	</image>



	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,0,2,2" height="26" width="20" >
		<initialize>
			self.toggle_css_class("tbgroup_{skin}");
			self.toggle_css_class("tbgroup_{color}");
			self.toggle_css_class("tbgroup_{skin}_{color}");
		</initialize>
		<attach name="tooglecssclass" arguments="jevent,name,mode">
			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
			self.toggle_css_class("tbgroup_{color}_"+name,mode);
			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
		</attach>
		<jsml-ref name="rteborderstyle"/>
		<attach name="attach_dom">
			<![CDATA[
			if(self.get_border_width()[1])self.set_padding([2,2,2,2])
			if(self.get_margin()[1] &&self.get_margin()[1]==2)
			{
				self.set_padding([0,2,0,2]);
				self.set_border_width([0,0,0,0]);
			}
			var p=self.get_parent();
			var cn=p._element.className;
			if(!cn)return;
			if(cn.indexOf("ribbon")!=-1)
			   self.set_margin([2,0,2,2]);
			else if(cn.indexOf("silver")!=-1)
				self.set_margin([1,1,1,1]);
			else if(cn.indexOf("blue")!=-1)
				self.set_margin([0,0,0,0]);
			]]>
		</attach>
	</panel>

	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>

	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" dock="left">
		<initialize>
			self.toggle_css_class("tbcontrol_{skin}");
			self.toggle_css_class("tbcontrol_{color}");
			self.toggle_css_class("tbcontrol_{skin}_{color}");
		</initialize>
		<attach name="tooglecssclass" arguments="jevent,name,mode">
			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
		</attach>
		<attach name="attach_dom">
			<![CDATA[
			var p=self.get_parent();
			var cn=p._element.className;
			if(!cn)return;
			if(cn.indexOf("_silver2")!=-1)
			{
				self.set_width(24);
				self.set_height(24);
				self.set_horizontal_align("center");
			}
			]]>
		</attach>
		<initialize>
			if("{color}"!="silver2")return;
			self.attach_event("set_padding",function()
			{
			var p=this.get_padding();
			self._img.style.clip="rect("+(-p[0]+1)+"px 20px "+(-p[0]+19)+"px 0px)";
			});
		</initialize>
	</image>

	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" width="32" dock="left">
		<initialize>
			self.toggle_css_class("splitbtn_{skin}");
			self.toggle_css_class("splitbtn_{color}");
			self.toggle_css_class("splitbtn_{skin}_{color}");
		</initialize>
		<attach name="tooglecssclass" arguments="jevent,name,mode">
			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
			self.toggle_css_class("splitbtn_{color}_"+name,mode);
			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
		</attach>
	</panel>

	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0">
		<initialize>
			self.toggle_css_class("dropdown_{skin}");
			self.toggle_css_class("dropdown_{color}");
			self.toggle_css_class("dropdown_{skin}_{color}");
		</initialize>
		<attach name="tooglecssclass" arguments="jevent,name,mode">
			self.toggle_css_class("dropdown_{skin}_"+name,mode);
			self.toggle_css_class("dropdown_{color}_"+name,mode);
			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
		</attach>
	</panel>

	<include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />

	<include src="{folder}skins/_shared/_layout.xml?{timems}" />

	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
		<jsml-ref name="rteborderstyle"/>
		<jsml-ref name="_shared_layout_{skin}_{color}"/>
	</panel>

</jsml>
