%%html
<style>
.example-container { background: #999999; padding: 2px; min-height: 100px; }
.example-container.sm { min-height: 50px; }
.example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}
.example-box.med { width: 65px; height: 65px; }   
.example-box.lrg { width: 80px; height: 80px; }   
</style>

from IPython.html import widgets
text = widgets.TextWidget(value="Hello World!")
text.set_css('background', 'lime')
text 

text.set_css('background', '#0000FF')

text.set_css('color', '#FFFFFF')

btn = widgets.ButtonWidget()
btn.set_css({
    'width': '100px',
    'height': '100px',
    'background': 'red',
})
btn

btn.set_css('background', '')

from IPython.display import display

float_range = widgets.FloatSliderWidget()
string = widgets.TextWidget(value='hi')
container = widgets.ContainerWidget(children=[float_range, string])

container.set_css('border', '3px dotted red')
display(container) # Displays the `container` and all of it's children.

container = widgets.ContainerWidget()
container.set_css('border', '3px dotted red')
display(container)

int_range = widgets.IntSliderWidget()
container.children=[int_range]

name1 = widgets.TextWidget(description='Location:')
zip1 = widgets.BoundedIntTextWidget(description='Zip:', min=0, max=99999)
page1 = widgets.ContainerWidget(children=[name1, zip1])

name2 = widgets.TextWidget(description='Location:')
zip2 = widgets.BoundedIntTextWidget(description='Zip:', min=0, max=99999)
page2 = widgets.ContainerWidget(children=[name2, zip2])

accord = widgets.AccordionWidget(children=[page1, page2])
display(accord)

accord.set_title(0, 'From')
accord.set_title(1, 'To')

name = widgets.TextWidget(description='Name:')
color = widgets.DropdownWidget(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])
page1 = widgets.ContainerWidget(children=[name, color])

age = widgets.IntSliderWidget(description='Age:', min=0, max=120, value=50)
gender = widgets.RadioButtonsWidget(description='Gender:', values=['male', 'female'])
page2 = widgets.ContainerWidget(children=[age, gender])

tabs = widgets.TabWidget(children=[page1, page2])
display(tabs)

tabs.set_title(0, 'Name')
tabs.set_title(1, 'Details')

counter = widgets.IntTextWidget(description='Counter:')
popup = widgets.PopupWidget(children=[counter], description='Popup Demo', button_text='Popup Button')
display(popup)

counter.value += 1





























counter.value += 1

popup.close()

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget(description="aaaaaaaaaaaaaaaaaa:"))

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget())

%%html
<style>
    div.cube { display: inline; padding: 5px; }
    div.red { background: red; }
    div.blue { background: blue; }
</style>

from IPython.html import widgets
from IPython.display import display
html = '<br />'.join([''.join(['<div class="cube">x</div>' for i in range(8)]) for j in range(8)])
widget = [widgets.HTMLWidget(value=html) for i in range(3)]

display(widget[0])
widget[0].add_class('red', 'div.cube:nth-child(even)')
widget[0].remove_class('red', 'div.red:nth-child(7n+1)')
widget[0].add_class('blue', 'div.red:nth-child(3n+1)')

display(widget[1])
widget[1].remove_class('red', 'div.red:nth-child(7n+1)')
widget[1].add_class('blue', 'div.red:nth-child(3n+1)')
widget[1].add_class('red', 'div.cube:nth-child(even)')

display(widget[2])
widget[2].add_class('red', 'div.cube:nth-child(even)')
widget[2].add_class('blue', 'div.red:nth-child(3n+1)')
widget[2].remove_class('red', 'div.red:nth-child(7n+1)')

buttons = [widgets.ButtonWidget(description=str(i)) for i in range(3)]

container = widgets.ContainerWidget(children=buttons)
display(container)

container = widgets.ContainerWidget(children=buttons)
display(container)
container.remove_class('vbox')
container.add_class('hbox')

container.set_css('width', '100%')
container.add_class('center')

# List of the bootstrap button styles
classes = [
    'btn', 
    'btn-primary', 
    'btn-info', 
    'btn-success', 
    'btn-warning', 
    'btn-danger', 
    'btn-inverse', 
    'btn-link'
]

# Display the buttons in a hbox
container = widgets.ContainerWidget(children=[widgets.ButtonWidget(description=c) for c in classes])
display(container)

# Apply classes after display
container.remove_class('vbox')
container.add_class('hbox')
ret = [container.children[i].add_class(c) for i, c in enumerate(classes)]

def create_label(cls):
    class_name = widgets.HTMLWidget(value=cls)
    container = widgets.ContainerWidget(children=[class_name])
    display(container)
    container.add_class(cls)

ret = [create_label(c) for c in [
    'alert', 
    'alert alert-error', 
    'alert alert-success', 
    'alert alert-info'
]]

classes = [
    'progress-info', 
    'progress-success', 
    'progress-warning', 
    'progress-danger',
    'progress-info progress-striped', 
    'progress-success progress-striped', 
    'progress-warning progress-striped', 
    'progress-danger progress-striped',
    'active progress-info progress-striped', 
    'active progress-success progress-striped', 
    'active progress-warning progress-striped', 
    'active progress-danger progress-striped',
]
ws = [widgets.IntProgressWidget(value=50, description=c) for c in classes]
ret = [display(w) for w in ws]
ret = [ws[i].add_class(c) for i, cs in enumerate(classes) for c in cs.split(' ')]

string = widgets.LatexWidget(value="Hello World!")
display(string) 

string.visible=False

string.visible=True

form = widgets.ContainerWidget()
first = widgets.TextWidget(description="First Name:")
last = widgets.TextWidget(description="Last Name:")

student = widgets.CheckboxWidget(description="Student:", value=False)
school_info = widgets.ContainerWidget(visible=False, children=[
    widgets.TextWidget(description="School:"),
    widgets.IntTextWidget(description="Grade:", min=0, max=12)
    ])

pet = widgets.TextWidget(description="Pet's Name:")
form.children = [first, last, student, school_info, pet]
display(form)

def on_student_toggle(name, value):
    if value:
        school_info.visible = True
    else:
        school_info.visible = False
student.on_trait_change(on_student_toggle, 'value')